Explicación detallada de la Card y el Grid

 


Vamos a desglosar cada parte del código para entender cómo funciona:

1. LA CARD (fondo blanco, bordes redondeados, sombra)

css
.card {
    background: white;           /* Fondo blanco */
    border-radius: 10px;         /* Bordes redondeados */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);  /* Sombra */
    width: 450px;
    padding: 25px;
}

Desglose:

PropiedadValor¿Qué hace?
backgroundwhitePinta el fondo de blanco
border-radius10pxRedondea las esquinas (a mayor número, más redondeadas)
box-shadow0 4px 12px rgba(0,0,0,0.15)Crea una sombra detrás

La sombra explicada:

css
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
/*           ↑  ↑    ↑     ↑
            (1) (2)  (3)   (4)   */

(1) Desplazamiento horizontal: 0px (centrada)
(2) Desplazamiento vertical: 4px (sombra abajo)
(3) Difuminado: 12px (qué tan borrosa)
(4) Color: rgba(0,0,0,0.15) (negro con 15% opacidad)

Visual de la card:

text
┌─────────────────────┐  ← borde redondeado
│                     │
│   CONTENIDO AQUÍ    │  ← fondo blanco
│                     │
└─────────────────────┘
     ║  ← sombra (box-shadow)
     ║

2. EL GRID (una columna + separación)

css
.card {
    display: grid;                 /* Activa Grid */
    grid-template-columns: 1fr;    /* Una sola columna */
    gap: 20px;                     /* Separación entre elementos */
}

Desglose:

PropiedadValor¿Qué hace?
displaygridConvierte el elemento en contenedor grid
grid-template-columns1frCrea UNA columna que ocupa todo el espacio (1fr = 1 fracción)
gap20pxEspacio de 20px entre cada fila

Visual del Grid:

text
┌─────────────────────┐
│  TÍTULO (h2)        │ ← Fila 1
│                     │
│  gap: 20px          │ ← Espacio de 20px
│                     │
│  TABLA              │ ← Fila 2
└─────────────────────┘

¿Qué significa 1fr?

  • fr = fracción del espacio disponible

  • 1fr = "una fracción" → ocupa TODO el ancho

  • Podría ser: grid-template-columns: 200px 1fr 100px (tres columnas)

EL CÓDIGO COMPLETO SOLO CON LO ESENCIAL:

html
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background: #ddd;
            display: flex;
            justify-content: center;
            padding: 30px;
        }

        /* LA CARD (fondo blanco, bordes redondos, sombra) */
        .card {
            background: white;           /* 1. Fondo blanco */
            border-radius: 10px;         /* 2. Bordes redondeados */
            box-shadow: 0 4px 12px gray; /* 3. Sombra */
            width: 400px;
            padding: 25px;
            
            /* GRID (una columna con separación) */
            display: grid;               /* 4. Activar Grid */
            grid-template-columns: 1fr;  /* 5. Una columna */
            gap: 20px;                   /* 6. Separación */
        }

        h2 {
            margin: 0;
            text-align: center;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid black;
            padding: 8px;
        }
    </style>
</head>
<body>
    <div class="card">  <!-- TODO DENTRO DE LA CARD -->
        <h2>Mi Título</h2>
        
        <table>
            <tr><th>A</th><th>B</th></tr>
            <tr><td>1</td><td>2</td></tr>
        </table>
    </div>
</body>
</html>

REGLA DE ORO:

  • La card es el contenedor visual (fondo, bordes, sombra)

  • El grid es cómo se organiza lo de adentro (columnas y espacios)

¿Queda claro o quieres que profundice en alguna parte?

Comentarios

Publicar un comentario

Entradas más populares de este blog

Tutorial de CSS: De Cero a Estilizar tu Primera Página Web

1. ¿Qué es CSS? CSS son las siglas de  Cascading Style Sheets  (Hojas de Estilo en Cascada). Es un lenguaje que usamos para describir la  presentación  de un documento escrito en HTML. Mientras que HTML se encarga de la estructura y el contenido (títulos, párrafos, imágenes), CSS se encarga de cómo se ve ese contenido (colores, fuentes, tamaños, posición). 2. ¿Cómo se integra CSS con HTML? Hay tres formas principales de incluir CSS en tu proyecto: CSS en línea (Inline):  Se aplica directamente a una etiqueta HTML usando el atributo  style . Es el método menos recomendado porque mezcla contenido con presentación y es difícil de mantener. html < p style = " color : blue ; font-size : 18px ; " > Este es un párrafo azul. </ p > CSS interno (Internal):  Se escribe dentro de la etiqueta  <style>  en la sección  <head>  del documento HTML. Es útil para páginas individuales o para hacer pruebas rápidas. html <...
Leer más

layouts

   "Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos). f Tutorial: Creando una Plantilla de Registro HTML/CSS Objetivo del Proyecto Vamos a crear la estructura básica de una página web que contiene: Un menú de navegación con 4 opciones. Un formulario de registro de usuario. Estilos CSS para que todo se vea ordenado y profesional. Paso 1: Entendiendo la Estructura...
Leer más

Proyecto Práctico: Tarjeta de Perfil

"Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos).    Creando una Tarjeta de Perfil con HTML y CSS Descripción del Proyecto Vamos a crear una tarjeta de perfil profesional que contiene: Foto de perfil circular Nombre de la persona Descripción breve Ubicación Botón interactivo con efectos Al final, tendremos una tarjeta moderna y responsive que se centra en la pa...
Leer más