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.

Captura de Pantalla 2021-11-01 a la(s) 10.58.50 a.m..png


Conceptos para comenzar


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.