El sistema de diseño en cuadrículas o rejilas (grid, en inglés) permite crear de forma fácil diseños complejos mediante el uso de filas y columnas. A diferencia de las cajas flexibles (flexbox) para crear estructuras de una sola dimensión, el sistema de las cuadrículas permite crear estructuras de varias dimensiones.
Usar el sistema de diseño de cuadrículas ofrece una serie de ventajas muy interesantes en el diseño y la maquetación web:
- Estructura de cuadrícula bidimensional
- Fácil creación de un diseño web responsive
- Fácil posición de elementos en la cuadrícula
- Fácil alineación y espaciado de elementos
- Capacidad de reordenar elementos HTML
- Separa mejor el diseño del contenido
Las cuadrículas (grid) toman la base y los conceptos de las cajas flexibles (flexbox). Por tanto, aprenderlas será de gran ayuda en la comprensión de las cuadrículas. Se empieza con la propiedad display y los valores grid o ingline-grid. A partir de este punto se usa una extensa familia de propiedades CSS.
Hay que tener en cuenta que en un diseño web se puede usar a la vez elementos flotantes, posicionamiento, cajas flexibles, cuadrículas y diseño tabular. Por ejemplo, un contenedor flex tendrá elementos hijos flexibles, y uno de estos elementos puede ser a su vez un contenedor grid cuyos hijos serán una cuadrícula.
¿Cuándo usar un método u otro? Si se quiere formar una estructura de una sola dimensión, se recomienda usar las cajas flexibles; y para crear una estructura con más de una dimensión, se recomienda usar las cuadrículas.
Código CSS:
.cuadricula {
display: grid;
grid-template-columns: 15% 35% 50%;
}
.item {
background: salmon;
border: 1px solid black;
color: black;
}
Código HTML:
<div class="cuadricula">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
Resultado:
123456
En este ejemplo se ha formado una cuadrícula con tres columnas y dos filas que dan espacio a los seis elementos hijos. La primera columna se ajustó a un 15% de ancho, la segunda al 35% y la tercera al 50%.
Conceptos básicos
Para empezar a trabajar con cuadrículas o grid conviene aprender los conceptos básicos y fundamentales sobre su estructura. Vamos a verlos con detalle.
Al igual que ocurre con las cajas flexibles (flexbox), el contenedor es el elemento padre que contiene los elementos hijos o ítems. Por lo tanto, la cuadrícula o rejilla queda definida dentro del contenedor.
Los ítems son los elementos hijos que se encuentran dentro del contenedor padre, ubicados en la cuadrícula. Son elementos HTML que contienen imágenes, texto, vídeos, etc., y se organizan en filas y columnas.
Una celda (grid cell) es la unidad mínima de una cuadrícula, y se forma mediante la intersección de una fila y una columna. En este sentido, una cuadrícula tendrá tantas celdas como cuadritos se lleguen a formar.
Una banda (grid track) es una fila (banda horizontal) o una columna (banda vertical) específica de la cuadrícula. Existe algunas propiedades CSS específicas que permiten definir el tamaño y el número de filas y columnas.
Hay dos tipos de bandas: las explícitas y las implícitas. Su diferencia radica en cómo se crean las filas y las columnas. Las bandas explícitas se crean de forma directa e intencional especificando la estructura de la cuadrícula mediante CSS. En cambio, las implícitas se crean de forma automática cuando se necesita reubicar elementos en la cuadrícula y no hay más bandas explícitas definidas.
Por su parte, un área (grid area) es el espacio formado por un conjunto de celdas adyacentes de la cuadrícula. Se puede definir un área mediante filas y columnas específicas para crear una región de forma rectangular.
Finalmente, una línea (grid line) es la línea separadora (borde) entre dos filas o dos columnas. Por lo tanto, puede ser una línea horizontal o vertical.
Unidad relativa fraccional
En el ejemplo anterior se ha usado porcentajes para definir el ancho de las tres columnas. Sin embargo, cuando se trabaja con cuadrículas también se puede hacer uso de la unidad fraccional (fr), que permite distribuir el espacio disponible de forma proporcional entre las filas o las columnas.
Esta unidad representa una fracción del espacio disponible en el elemento contenedor. Una columna de 1fr ocupará todo el espacio disponible; dos columnas de 1fr ocuparán cada una la mitad del espacio disponible, y así sucesivamente. Admite valores decimales.
Imaginemos un contenedor con una anchura de 300 píxeles y tres columnas: la primera y la segunda medirán 1fr mientras que la tercera será de 2fr. Las dos primeras ocuparán un cuarto del espacio disponible, mientras que la tercera columna ocupará exactamente la mitad (150 píxeles).
Tipos de contenedores para cuadrículas
Existe dos tipos de contenedores para cuadrículas (grid): los de bloque y los de línea. Para definir uno de los dos tipos se usa la propiedad de visualización display mediante uno de los dos siguientes valores:
| Valor | Descripción |
|---|---|
grid | El contenedor es un elemento de bloque. |
inline-grid | El contenedor es un elemento de línea. |
Tanto si se usa el valor grid como si se usa el valor inline-grid, los elementos hijos se distribuirán dentro del contenedor padre. Una vez se ha elegido uno de estos valores, puede hacerse uso de varias propiedades CSS que permiten configurar la cuadrícula para lograr el diseño deseado.
Distribución de elementos
La distribución de los elementos de una cuadrícula CSS se realiza principalmente con filas y columnas. Esta estructura bidimensional se define a través de las propiedades grid-template-rows y grid-template-columns, gracias a las que se genera bandas explícitas (de forma intencional).
Mediante la definición de áreas también es posible diseñar de forma intuitiva plantillas estructurales complejas, ya que usan un recurso “visual”. Se definen con las propiedades grid-template-areas y grid-area.
Adaptación de bandas
En ocasiones, es necesario reubicar elementos HTML dentro de la cuadrícula, pero no hay más bandas explícitas que estén definidas en el código CSS. Por tanto se generarán nuevas bandas (filas o columnas) de forma automática.
Estas bandas automáticas, que son conocidas como bandas implícitas, se pueden modificar mediante una serie de propiedades que CSS provee para ello: grid-auto-rows, grid-auto-columns y grid-auto-flow.
Ajustes de celdas
Las celdas se pueden ajustar en posición y tamaño de forma individualizada, rompiendo la estructura bidimensional clásica de las filas y las columnas. Para realizar ajustes en las celdas, CSS provee una serie de propiedades que permiten indicar el principio y el final de cada celda en el eje horizontal o vertical.
Estas propiedades son las siguientes:
grid-column-startgrid-column-endgrid-column(abreviatura)grid-row-startgrid-row-endgrid-row(abreviatura)
Nombres de líneas
Las líneas separadoras (bordes) de las filas y las columnas están identificadas por defecto mediante un número entero positivo. Sin embargo, trabajar con números es bastante abstracto y tedioso. Con CSS es posible poner nombres a las líneas, facilitando la legibilidad y el mantenimiento del código.
Los nombres se asignan en las propiedades grid-template-columns y grid-template-rows en el elemento contenedor, pero luego se utilizan sobre los elementos hijos con las propiedades grid-column-start, grid-column-end, grid-row-start y grid-row-end.
Separación entre elementos
Entre los elementos de una cuadrícula es posible añadir un hueco o separación, de modo que queden espaciadas entre sí un tamaño determinado. Para ello se usa las propiedades row-gap y column-gap sobre el elemento contenedor. Su uso es más apropiado que el de los márgenes sobre los elementos hijos.
Ordenación de elementos
Los elementos de una cuadrícula se pueden ordenar alterando la estructura inicial del código HTML. La propiedad CSS order ofrece esta posibilidad, que sin duda es un gran recurso de maquetación web. Esta propiedad permite asignar un “peso” a los elementos hijos (ítems) de la cuadrícula, de forma individualizada.
También hay que destacar que cuando se trabaja con áreas de cuadrícula, de forma intrínseca ya llevan su propio método de ordenación. Por lo tanto, existe más de un camino para obtener el resultado deseado.
Alineación de elementos
La alineación de los elementos hijos (ítems) de una cuadrícula (grid) se puede controlar con CSS de forma global, afectándolos a todos, mediante las propiedades justify-content y justify-items para el eje horizontal. En cambio, para el eje vertical se usa las propiedades align-content y align-items.
Si se quiere crear excepciones de alineación para ítems en específico, de forma individualizada, se debe usar las propiedades justify-self y align-self, que son para los ejes horizontal y vertical, respectivamente.
La propiedad ‘grid’
La propiedad grid es una abreviatura (shorthand) que unifica varias propiedades CSS para trabajar con el sistema de cuadrículas (grid). Permite definir bandas explícitas (de forma intencional), bandas implícitas (automáticas) y adecuar las separaciones entre ellas. Es una propiedad muy versátil.
Lista de las propiedades que grid unifica:
- Explícitas:
grid-template-rowsgrid-template-columnsgrid-template-areas
- Implícitas:
grid-auto-rowsgrid-auto-columnsgrid-auto-flow
- Separaciones:
column-gaprow-gap
Sintaxis
A continuación se describe la sintaxis de la propiedad grid.
Especifica el tamaño de filas y columnas:
grid-template-rows / grid-template-columns
Especifica la posición de las áreas en el contenedor:
grid-template-areas
Indica el tamaño de las filas y el tamaño de las columnas implícitas:
grid-template-rows / grid-auto-columns
Indica el tamaño de las filas implícitas y el tamaño de las columnas:
grid-auto-rows / grid-template-columns
Indica el tamaño de las filas, el algoritmo de colocación automática y el tamaño automático de las columnas:
grid-template-rows / grid-auto-flow grid-auto-columns
Indica el algoritmo de colocación automática, el tamaño automático de las filas y el tamaño de las columnas:
grid-auto-flow grid-auto-rows / grid-template-columns
