CSS Grid: Maquetación en Dos Dimensiones

Después de explorar Flexbox para la maquetación en una dimensión, es hora de conocer a su poderoso compañero: **CSS Grid**. Grid es el sistema de maquetación más robusto y flexible para diseñar la **estructura bidimensional** de tu página web, controlando tanto **filas como columnas al mismo tiempo**.

Imagina CSS Grid como el arquitecto que define el plano de tu casa: dónde irán las paredes, de qué tamaño serán las habitaciones, y cómo se organizarán en el espacio total. Es ideal para el diseño global de tu sitio, como la distribución de una cabecera, una barra lateral, el contenido principal y un pie de página.

1. El Concepto de Contenedor y Elementos Grid

Al igual que Flexbox, Grid trabaja con un contenedor y sus elementos hijos:

• Contenedor Grid (Grid Container): Es el elemento padre al que le aplicas la propiedad display: grid;. Este contenedor define la cuadrícula y sus hijos directos se convierten en «elementos grid».

  .contenedor-principal {
      display: grid; /* ¡La declaración mágica! */
  }

• Elementos Grid (Grid Items): Son los hijos directos del contenedor grid. Estos elementos se posicionarán y distribuirán dentro de la cuadrícula que definas.

  <div class="grid-container">
      <div class="grid-item">Header</div>
      <div class="grid-item">Sidebar</div>
      <div class="grid-item">Content</div>
  </div>

2. Propiedades del Contenedor Grid

Las propiedades más importantes para definir tu cuadrícula se aplican al **contenedor grid**.

a. grid-template-columns y grid-template-rows: Definir Columnas y Filas

Estas propiedades son el corazón de Grid. Permiten especificar el número de columnas y filas que tendrá tu cuadrícula, y el tamaño de cada una.

• Puedes usar unidades absolutas (px), relativas (em, rem, %) o la unidad especial fr (unidad de fracción).
  • **fr (unidad de fracción):** Representa una fracción del espacio disponible en el contenedor grid. Si tienes 1fr 2fr, la segunda columna será el doble de ancha que la primera.
• La función repeat() es muy útil para definir columnas o filas repetitivas.

.grid-container {
    display: grid;
    grid-template-columns: 100px 1fr 2fr; /* Columna fija de 100px, luego una fracción y dos fracciones del espacio restante */
    grid-template-rows: auto 200px; /* La primera fila se ajusta al contenido, la segunda tiene 200px */
}

.grid-container-repeat {
    grid-template-columns: repeat(4, 1fr); /* Cuatro columnas de igual ancho */
    grid-template-rows: repeat(2, 100px); /* Dos filas de 100px de alto */
}

b. gap (o grid-gap): Espacio entre Celdas

Define el espacio (gutter) entre las filas y columnas. Es una abreviatura para row-gap y column-gap.

.grid-container {
    display: grid;
    gap: 20px; /* 20px de espacio entre filas y columnas */
    row-gap: 10px; /* Solo 10px de espacio entre filas */
    column-gap: 30px; /* Solo 30px de espacio entre columnas */
}

c. justify-items y align-items: Alineación de Contenido en Celdas

Similar a Flexbox, pero alinean el **contenido de los ítems** dentro de su propia celda de la cuadrícula. justify-items para el eje horizontal y align-items para el vertical.

• Valores comunes: start, end, center, stretch (por defecto).

.grid-container {
    display: grid;
    justify-items: center; /* Centra el contenido horizontalmente en cada celda */
    align-items: center; /* Centra el contenido verticalmente en cada celda */
}

d. justify-content y align-content: Alineación del Grid Completo

Estas propiedades alinean la **cuadrícula completa** dentro del contenedor, si hay espacio extra disponible (cuando el tamaño total del grid es menor que el contenedor).

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 100px); /* Un grid con un tamaño fijo */
    justify-content: center; /* Centra el grid completo horizontalmente */
    align-content: center; /* Centra el grid completo verticalmente */
}

3. Propiedades de los Elementos Grid (Items)

Una vez definida la cuadrícula en el contenedor, puedes posicionar y controlar el tamaño de los elementos individuales dentro de ella.

a. grid-column y grid-row: Posicionar y Extender Ítems

Estas propiedades permiten que un ítem ocupe múltiples columnas o filas. Se refieren a las **líneas** de la cuadrícula.

• grid-column-start, grid-column-end: Para las columnas.
• grid-row-start, grid-row-end: Para las filas.
• La abreviatura grid-column: inicio / fin; y grid-row: inicio / fin; es muy común.
• También puedes usar span X; para indicar cuántas columnas/filas quieres que el ítem ocupe.

.item-header {
    grid-column: 1 / 4; /* Ocupa de la línea 1 a la 4 (3 columnas) */
    grid-row: 1; /* En la primera fila */
}
.item-sidebar {
    grid-column: span 2; /* Ocupa 2 columnas */
}

b. grid-area: Nombramiento y Posicionamiento Simplificado

Permite nombrar áreas de tu cuadrícula y luego posicionar ítems por esos nombres. ¡Es muy potente para diseños complejos y responsivos!

1. Primero, defines los nombres de las áreas en el contenedor con grid-template-areas.
2. Luego, asignas un nombre de área a cada ítem con grid-area.

/* En el CONTENEDOR */
.grid-container-layout {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "nav content sidebar"
        "footer footer footer";
}

/* En los ITEMS */
.item-header { grid-area: header; }
.item-nav { grid-area: nav; }
.item-content { grid-area: content; }
.item-sidebar { grid-area: sidebar; }
.item-footer { grid-area: footer; }

.grid-example-1 {
    grid-template-columns: 1fr 1fr 1fr; /* O: repeat(3, 1fr) */
    grid-template-rows: 100px 100px;
    gap: 15px;
}

.grid-example-2 {
    grid-template-columns: 100px auto 1fr;
    grid-template-rows: repeat(2, 80px);
}
.grid-example-2 .item-a {
    grid-column: 1 / 3;
}
.grid-example-2 .item-b {
    grid-row: 1 / 3;
}

.grid-example-3 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "nav content sidebar"
        "footer footer footer";
    min-height: 400px; /* Añadido aquí para que el layout se vea bien */
}
.header-item { grid-area: header; }
.nav-item { grid-area: nav; }
.content-item { grid-area: content; }
.sidebar-item { grid-area: sidebar; }
.footer-item { grid-area: footer; }

CSS Grid es la herramienta más poderosa para crear layouts complejos y responsivos. Una vez que entiendes cómo definir las cuadrículas y posicionar los ítems, las posibilidades son infinitas.

Con **Flexbox** (una dimensión) y **Grid** (dos dimensiones), tienes las bases de la maquetación moderna. ¿Qué te gustaría explorar a continuación? Podríamos ver:

• **El Modelo de Caja (Box Model) a fondo y otras propiedades de posicionamiento clásico** (position, z-index, float, clear) para una comprensión completa del layout.
• **Diseño Responsivo (Responsive Design)** con Media Queries, que es esencial para que tus páginas se vean bien en todos los dispositivos.
• **Introducción a JavaScript:** Cómo agregar interactividad a tus páginas.

¡Tú decides el siguiente paso en tu aventura de desarrollo web!