CSS Grid nos permite maquetar contenido ajustándolo a cuadrículas o rejillas (grids) totalmente configurables mediante estilos CSS.
Mediante CSS Grid podemos dividir la página en una rejilla a partir de la cual se pueden posicionar los diferentes elementos de manera muy sencilla. Gracias a los sistemas de maquetación de CSS Grid y CSS Flexbox se pueden crear estructuras con menos código y de una forma más fácil que con los métodos tradicionales.
1. Cómo utilizar CSS Grid
Para utilizar CSS Grid definiremos un contenedor padre y en su interior los ítems que se necesiten crear. Además, se debe definir una serie de propiedades, tanto para el contenedor padre como para las rejillas que contiene. Veamos en detalle las propiedades más importantes.
1.1. Propiedad display: grid | inline-grid
Para crear la cuadrícula grid hay que definir sobre el elemento contenedor la propiedad display y especificar el valor grid o inline-grid.
<!DOCTYPE html>
<html>
<head>
<style>
.contenedor{
display: grid;
}
</style>
</head>
<body>
<div class="contenedor"> <!-- contenedor padre-->
<div class="rejilla">Item 1</div> <!-- Ítems del grid -->
<div class="rejilla">Item 2</div>
<div class="rejilla">Item 3</div>
<div class="rejilla">Item 4</div>
</div>
</body>
</html>
Los valores inline-grid y grid indican cómo se comporta el contenedor con respecto al contenido exterior. Con el valor inline-grid el contenedor aparece en línea con respecto al contenido exterior. Con el valor grid, el contenedor aparece en bloque con respecto al contenido exterior.
| Valor | Descripción |
|---|---|
| inline-grid | Cuadrícula en línea con respecto al contenido exterior |
| grid | Cuadrícula en bloque con respecto al contenido exterior |
Ejemplo
1.2. Propiedades grid-template-colums y grid-template-rows
Para definir el tamaño de las columnas y las filas usamos las propiedades grid-template-colums y grid-template-rows.
| Propiedad | Valor | Descripción |
|---|---|---|
grid-template-columns |
[col1] [col2] … | Tamaño de cada columna |
grid-template-rows |
[fila1] [fila2] … | Tamaño de cada fila |
Como vemos a continuación, si definimos los siguientes valores crearemos una cuadrícula de 2 filas por 3 columnas.
.contenedor {
display: grid;
grid-template-rows: 200px 200px;
grid-template-columns: 200px 200px 200px;
}
Podemos usar las unidades que ya conocemos como los píxeles o los porcentajes, o utilizar la unidad fr (unidad fraccional propia del sistema CSS Grid) que indica la proporción del espacio que ocupará cada elemento. Por ejemplo, si definimos 3 columnas y le asignamos un valor 1fr a cada una, esto repartirá el espacio a partes iguales entre las 3. En otro caso, si definimos el valor 2fr a una de ellas, esa ocupará el doble de espacio que las otras.
Ejemplo
.contenedor{
display: grid;
grid-template-columns: auto auto auto auto;
}
.contenedor2{
display: grid;
grid-template-columns: 50px 200px 300px 500px;
}
.contenedor3{
display: grid;
grid-template-columns: 1fr 2fr 1fr 3fr;
}
1.3. Propiedades row-gap y column-gap
Podemos definir el espaciado entre las rejillas mediante las propiedades row-gap y column-gap. El espaciado se crea entre las columnas/filas, no en los bordes exteriores: laterales, superiores e inferiores. Si quieres añadir espacio en los bordes exteriores de la rejilla, puedes usar propiedades como margin en el contenedor de la rejilla.
| Propiedad | Descripción |
|---|---|
column-gap | Espaciado entre columnas |
row-gap | Espaciado entre filas |
Ejemplo
En el siguiente ejemplo, hemos definido una cuadrícula con tres columnas de igual tamaño utilizando la propiedad grid-template-columns. Luego, hemos utilizado la propiedad column-gap para establecer un espacio de 20 píxeles entre las columnas y la propiedad row-gap para establecer un espacio de 10 píxeles entre las filas. También hemos agregado algunos elementos a la cuadrícula y les hemos dado un color de fondo y un relleno para que puedas ver el efecto del espacio entre las columnas y las filas
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 20px;
row-gap: 10px;
}
.grid-item {
background-color: lightblue;
padding: 10px;
}
1.4. Propiedad grid-gap
La propiedad grid-gap de CSS Grid es una propiedad abreviada para establecer tanto grid-column-gap como grid-row-gap en una sola declaración. Esta propiedad acepta uno o dos valores, donde el primer valor especifica el tamaño del espacio entre las filas y el segundo valor especifica el tamaño del espacio entre las columnas. Si solo se proporciona un valor, se aplica a ambas propiedades. Ejemplo:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px 20px;
}
En este ejemplo, hemos definido una cuadrícula con tres columnas de igual tamaño utilizando la propiedad grid-template-columns. Luego, hemos utilizado la propiedad grid-gap para establecer un espacio de 10 píxeles entre las filas y un espacio de 20 píxeles entre las columnas.
En este artículo se han visto los primeros pasos para empezar a usar CSS Grid. Además de las propiedades estudiadas, conviene conocer otras muy interesantes para conseguir alinear los elementos, cambiar su tamaño y modificar diferentes aspectos. Si quieres conocer más a fondo este sistema accede a la siguiente guía completa.