Adobe Illustrator: una de las mejores herramientas de diseño gráfico
01/08/2022
Importancia de hacer un análisis FODA para tu negocio
09/10/2022
Tabla de contenidos
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.
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.
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
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
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 |
Como vemos a continuación, si definimos los siguientes valores crearemos un espaciado entre columnas de 20px y de 10px entre filas.
.contenedor{
display: grid;
grid-template-rows: 200px; 200px
grid-template-columns: 200px; 200px; 200px;
column-gap: 20px;
row-gap: 10px;
}
En este artículos 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.