Grid en CSS

CSS Grid Layout es una forma bidimensional de diseño web que permite a los desarrolladores crear diseños de página complejos y flexibles con facilidad.

Definición del contenedor de la cuadrícula (grid container): En primer lugar, se debe definir un contenedor que será la cuadrícula principal. Esto se hace estableciendo la propiedad display en grid o inline-grid.
```
.container {
  display: grid;
}
```
Definición de las columnas y filas (grid columns y grid rows): Después de definir el contenedor de la cuadrícula, puedes definir las columnas y filas utilizando las propiedades grid-template-columns y grid-template-rows. Puedes especificar el tamaño de las columnas y filas utilizando unidades de longitud como píxeles (px), porcentajes (%), fracciones (fr), etc.
```
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px;
}
```
Colocación de elementos en la cuadrícula (grid items): Una vez definidas las columnas y filas, puedes colocar elementos dentro de la cuadrícula utilizando las propiedades grid-column y grid-row, o sus variantes abreviadas grid-area. Puedes definir en qué columnas y filas debe colocarse un elemento, y también puedes especificar su tamaño dentro de la cuadrícula.
```
.item {
  grid-column: 2 / 4; /* Coloca el elemento desde la columna 2 hasta la columna 4 */
  grid-row: 1 / 3; /* Coloca el elemento desde la fila 1 hasta la fila 3 */
}
```
Espaciado entre filas y columnas (grid gaps): Puedes agregar espacio entre filas y columnas utilizando las propiedades grid-column-gap y grid-row-gap, o su variante abreviada grid-gap.
```
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
```
Algunas propiedades adicionales:
- justify-items: alinea los elementos a lo largo del eje de las columnas.
- align-items: alinea los elementos a lo largo del eje de las filas.
- justify-content: alinea la cuadrícula dentro de su contenedor.
- align-content: alinea las filas dentro de la cuadrícula.

Grid en CSS

Vídeo explicativo