El grid o grilla es simplemente una colección de líneas horizontales (filas) y verticales (columnas), que cuenta con el espaciado (o gutter) entre cada una de ellas.
Para entender mejor, las grillas son un elemento primordial dentro del área de diseño y por eso, la gran mayoría de los sitios web actuales están basados en la utilización de ellas. Algunos desarrolladores están familiarizados con las estructuras de engrillado siempre que han utilizado frameworks como Bootstrap o Foundation. Sin embargo, el CSS Grid busca que los cambios de maquetación se realicen sin la necesidad de hacer mayores ajustes de estructura en HTML y con la posibilidad de definir mejor las filas y columnas a utilizar dentro del diseño.
Un ejemplo de grilla con sus espaciados lo podemos ver, a continuación:
Primeros pasos en CCS Grid
CSS Grid es un sistema en 2D que permite definir las filas y columnas a diferencia de Flexbox, que funciona en una única dimensión. Este grid también, permite crear layouts complejos de una manera práctica y sencilla.
En ese sentido, el grid pasa a ser nativo y mantiene un uso standard al igual que HTML! Es decir, es posible utilizar en los navegadores como Chrome, Firefox, Safari, Edge y Opera.
Terminologías de conocimiento en el CCS
Container
Es el contenedor que agrupará elementos, disponiéndose en la utilización de CSS Grid. En otras palabras: (display: grid; o display: inline-grid;).
Item (elementos 'n')
Es cualquier elemento dentro de una celda de la grilla.
Lines
Son las líneas horizontales y verticales que dividen y separan los diferentes módulos en filas y columnas.
Cell
Es una unidad singular o celdas que conformará la grilla.
Area
Se trata de un área o conjunto de celdas conformada por una cantidad definida de celdas.
Track
Es un área o conjunto de celdas sin incluir el espaciado que rodee dicho conjunto.
Row
Es un conjunto de celdas horizontales.
Column
Se trata de un conjunto de celdas verticales.
Gutter
Es el espaciado existente (o no) entre celdas o conjuntos de celdas.
Elementos básicos para CSS Grid
- Definir un contenedor: Lo primero que se debe hacer para crear una Grilla es definir el contenedor (o wrapper) que agrupará nuestros elementos. Para ello, es necesario declarar mediante CSS el atributo grid, como el ejemplo a continuación:
- Definir filas y columnas: Existen diferentes maneras de declarar tanto filas como columnas con el uso de CSS Grid. La manera más convencional es mediante los atributos grid-template-columns y grid-template-rows.
Esto significa que existirán dos columnas de un alto fijo de 200px, y que cada fila contendrá tres columnas de un ancho de 200px.
- Añadir espaciado: Añadir espaciado entre columnas y filas es bastante simple utilizando CSS Grid:
Esta terminología nos permitirá definir el espaciado para columnas y filas de una sola vez. Sin embargo, cuando que queremos definir un espaciado distinto entre columnas o filas, debemos especificar de la siguiente manera:
- Unidad FR: Crear una grilla utilizando medidas estáticas como pixeles puede resultar poco flexible. El CSS Grid otorga una nueva unidad de medida llamada fr, alias de fracción. Si deseamos definir una grilla de 3 columnas con un ancho equitativo entre ellas, solo bastará con definirlas de la siguiente manera:
- Utilización de repeat(): MDN define a la notación repeat() como un elemento que permite utilizar múltiples valores exactos.
CSS Grid permite la utilización de distintas unidades para definir anchos, altos y espaciados, incluso, dentro de una misma propiedad.
Soporte actual en navegadores
Los navegadores que actualmente soportan de manera nativa CSS Grid son los siguientes:
Otra excelente alternativa para aprender de CSS Grid, es con el juego CSS Grid Garden, el que a través de 28 niveles te permite conocer las funcionalidades básicas y complejas del CSS de una forma divertida.