El diseño de cuadrícula CSS (CSS Grid Layout) es una técnica poderosa para crear diseños web complejos y responsivos. A diferencia de Flexbox, que se centra en la disposición de elementos en una sola dimensión (fila o columna), CSS Grid permite trabajar en dos dimensiones, lo que facilita la creación de estructuras de diseño más complejas.

1. Contenedor de Cuadrícula (Grid Container):

   • Es el elemento padre que contiene los elementos de la cuadrícula.
   • Se define estableciendo la propiedad display a grid o inline-grid.

2. Elementos de Cuadrícula (Grid Items):

   • Son los elementos hijos directos del contenedor de cuadrícula.
   • Pueden ser posicionados dentro de la cuadrícula usando propiedades específicas de CSS Grid.

3. Líneas de Cuadrícula (Grid Lines):

   • Son las líneas que dividen la cuadrícula en filas y columnas.
   • Se numeran desde 1 en adelante, tanto horizontal como verticalmente.

4. Pistas de Cuadrícula (Grid Tracks):

   • Son las filas y columnas que se forman entre las líneas de cuadrícula.

5. Áreas de Cuadrícula (Grid Areas):

   • Son secciones rectangulares dentro de la cuadrícula que pueden abarcar múltiples filas y columnas.

• grid-template-columns y grid-template-rows: Definen el número y tamaño de las columnas y filas.

  .grid-container {
      display: grid;
      grid-template-columns: 100px 200px 1fr;
      grid-template-rows: 50px 100px;
  }
  

• gap: Define el espacio entre filas y columnas.

  .grid-container {
      gap: 10px;
  }
  

• justify-items y align-items: Controlan la alineación de los elementos de cuadrícula dentro de sus celdas.

  .grid-container {
      justify-items: center;
      align-items: center;
  }
  

• grid-column y grid-row: Especifican la posición de un elemento en la cuadrícula.

  .grid-item {
      grid-column: 1 / 3; /* Desde la línea 1 hasta antes de la línea 3 */
      grid-row: 1 / 2;   /* Desde la línea 1 hasta antes de la línea 2 */
  }
  

A continuación, se muestra un ejemplo de cómo crear un diseño de cuadrícula simple:

• grid-template-columns: repeat(2, 1fr);: Crea dos columnas de igual tamaño que ocupan el espacio disponible.
• grid-template-rows: 100px 100px;: Define dos filas, cada una de 100px de altura.
• gap: 10px;: Establece un espacio de 10px entre las filas y columnas.
• grid-item: Cada elemento de la cuadrícula tiene un fondo azul claro, un borde negro y el contenido centrado.

Tarea: Crea un diseño de cuadrícula que tenga tres columnas y dos filas. La primera columna debe ser de 100px, la segunda de 200px, y la tercera debe ocupar el espacio restante. Las filas deben ser de 150px cada una. Alinea los elementos al centro de sus celdas.

Solución:

• Error Común: No definir correctamente el tamaño de las columnas y filas. Asegúrate de que las unidades de medida sean consistentes y que el diseño sea responsivo.
• Consejo: Usa fr para crear diseños flexibles que se adapten al tamaño del contenedor.

El diseño de cuadrícula CSS es una herramienta esencial para crear diseños web modernos y responsivos. Al dominar CSS Grid, puedes construir interfaces complejas de manera eficiente y con un control preciso sobre la disposición de los elementos. En el siguiente módulo, exploraremos cómo combinar CSS Grid con otras técnicas avanzadas para mejorar aún más tus habilidades de diseño web.