CSS Grid Layout es un sistema bidimensional de diseño para la web que permite a los desarrolladores crear layouts complejos de manera sencilla y consistente. Funciona permitiendo que dividamos una parte de nuestra página web en un número arbitrario de filas y columnas, creando una "rejilla" o "cuadrícula" (grid) en la que podemos colocar nuestros elementos.
Primero, se define un contenedor de grid. Esto se hace aplicando display: grid;. Este elemento se convierte en el contenedor de todos los elementos de la cuadrícula (grid items).
.container {
display: grid;
}
Luego, puedes definir el tamaño de las columnas y filas utilizando las propiedades grid-template-columns y grid-template-rows.
.container {
display: grid;
grid-template-columns: 100px 200px auto;
grid-template-rows: auto 100px;
}
En este ejemplo, el contenedor de grid tendrá tres columnas de anchura 100px, 200px y auto respectivamente, y dos filas donde la primera se ajusta al contenido (auto) y la segunda tiene 100px de altura.
Los elementos dentro del contenedor de grid pueden ser colocados en la cuadrícula utilizando grid-column y grid-row. Estas propiedades aceptan valores que indican el inicio y el fin de donde el elemento debe extenderse en la cuadrícula.
.caja1{
grid-column: 1 / 3;
grid-row: 1;
}
.caja2{
grid-column: 2 / 4;
grid-row: 1 / 3;
}
En este ejemplo, .caja1 se extenderá desde la primera hasta antes de la tercera columna y tomará solo la primera fila .caja2 se extenderá de la segunda hasta la última columna y de la primera hasta antes de la tercera fila.
Es posible utilizar la propiedad span, siendo igual que el ejemplo anterior.
.caja1{
grid-column: 1 / span 2;
grid-row: 1;
}
CSS Grid también incluye una serie de otras propiedades que permiten un control más fino del diseño, como grid-auto-rows, grid-auto-columns, y grid-auto-flow para el control automático de las celdas, así como propiedades para alinear y justificar elementos (align-items, justify-items, align-content, justify-content), y muchas más.
Puedes definir áreas de grid utilizando grid-template-areas, lo cual te permite asignar nombres a las diferentes partes de tu cuadrícula y luego posicionar elementos refiriéndose a esos nombres.
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
Esto crea una cuadrícula con un encabezado (header), un área de contenido (content), una barra lateral (sidebar) y un pie de página (footer), cada uno ocupando las áreas definidas.