CSS Grid para maquetar contenido con rejillas o cuadrículas
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 precisan definir una serie de propiedades, tanto para el contenedor padre como para las rejillas que se definen en su interior. 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-gridy 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
0
1.2. Propiedades grid-template-colums y grid-template-rows
Para definir el espaciado o 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 (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
0
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 solo se crea entre las columnas/filas, no en los bordes exteriores.
| Propiedad | Descripción |
|---|---|
column-gap | Espaciado entre columnas |
row-gap | Espaciado entre filas |
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
.contenedor{
display: grid;
grid-template-rows: 200px; 200px
grid-template-columns: 200px; 200px; 200px;
column-gap: 20px;
row-gap: 10px;
}
Ejemplo
0
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: repeat(3, 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.