Introducción a Grid

¿Qué es CSS Grid Layout?

Es una especificación de CSS que nacio por la necesidad de hacer layouts mucho más dinamicos.

CSS Grid introdujo un sistema de grilla que es una cuadricula con columnas (columns) y filas (rows), con ellas podemos ubicar elementos de manera más fácil.

Conceptos para comenzar

• Contenedor: Es el elemento que se va a convertir en una grilla.
• Item: Son los elementos que estan dentro del contenedor, estos elementos pueden ser de cualquier tipo como links, botones, imagenes, etc. Todos ellos se convertiran en grid items, esto quieres decir que por defecto van a tener propiedades que los ayudan a trabajar muy bien con nuestro sistema de grilla.
• Líneas: son los elementos que limitan o dividen las filas o columnas de una grilla.
• Celda: Es la unidadminima que nosotros podemos tener en una grilla, esta delimitada por 4 lineas y normalmente solo ocupa 1 fila y 1 columna.
• Track: Es un grupo de celdas, que solo puede estar en una fila o en una misma columna
• Área: Es un grupo de celdas, estas pueden usar varias filas o varias columnas a la vez.

Propiedades de Grid

Propiedades del contenedor

Display grid: Define el elemento como contenedor de cuadrícula y establece un nuevo contexto de formato de cuadrícula para su contenido.

grid-template-columns y grid-template-rows: Define las columnas y filas de la cuadrícula con una lista de valores separados por espacios. Los valores representan el tamaño de la pista y el espacio entre ellos representa la línea de la cuadrícula.

Gaps: Es un espacio entre filas y columnas.