¿Qué es CSS Grid?

El diseño de cuadrícula CSS (o simplemente CSS Grid) es un sistema de distribución bidimensional en CSS. Permite gestionar la colocación de elementos tanto en filas (horizontalmente) como en columnas (verticalmente), creando estructuras de red complejas para construir interfaces.

Las principales conceptos de CSS Grid incluyen:

Contenedor de cuadrícula: Elemento al que se le aplica la propiedad display: grid o display: inline-grid. Los descendientes de este elemento se convierten en elementos de cuadrícula.
Elementos de cuadrícula: Los descendientes directos del contenedor de cuadrícula.
Líneas de cuadrícula: Líneas divisorias que forman la cuadrícula. Pueden tener nombres o un índice numérico.
Pistas de cuadrícula: El espacio entre dos líneas de la cuadrícula, que puede ser una columna o una fila.
Celdas de cuadrícula: La unidad más pequeña de la cuadrícula, formada por la intersección de una fila y una columna.
Áreas de cuadrícula: Una región rectangular de la cuadrícula que ocupa una o varias celdas.

Las propiedades clave para trabajar con CSS Grid incluyen:

Para el contenedor:

display: grid | inline-grid;
grid-template-columns: Define las columnas de la cuadrícula.
grid-template-rows: Define las filas de la cuadrícula.
grid-template-areas: Define áreas nombradas de la cuadrícula.
gap | row-gap | column-gap: Define los espacios entre las celdas.
justify-items | align-items | place-items: Alineación del contenido dentro de las celdas a lo largo de los ejes principal y transversal.
justify-content | align-content | place-content: Alineación de las pistas de la cuadrícula dentro del contenedor.

Para los elementos (Elementos de cuadrícula):

grid-column-start | grid-column-end | grid-column: Define qué líneas de columna ocupa el elemento.
grid-row-start | grid-row-end | grid-row: Define qué líneas de fila ocupa el elemento.
grid-area: Asigna al elemento una región nombrada de la cuadrícula o define su posición mediante líneas.
justify-self | align-self | place-self: Alineación del propio elemento dentro de su celda.

CSS Grid proporciona herramientas potentes para crear diseños adaptativos y complejos, simplificando significativamente tareas que anteriormente requerían float, inline-block o posicionamiento absoluto.

.container {
  display: grid; /* Convertimos el elemento en un contenedor de cuadrícula */
  grid-template-columns: 1fr 1fr 1fr; /* Creamos 3 columnas de igual ancho */
  grid-template-rows: auto auto; /* Creamos 2 filas con altura automática */
  gap: 10px; /* Añadimos espacios entre las celdas */
}

.item {
  /* Los elementos dentro del contenedor automáticamente se convierten en elementos de cuadrícula */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.item:nth-child(1) {
  grid-column: 1 / 3; /* El primer elemento ocupa las columnas 1 a 3 */
}