¿Qué es CSS Grid Layout?


CSS Grid layout contiene funciones de diseño dirigidas a los desarrolladores de aplicaciones web. El CSS grid se puede utilizar para lograr muchos diseños diferentes. También se destaca por permitir dividir una página en áreas o regiones principales, por definir la relación en términos de tamaño, posición y capas entre partes de un control construido a partir de primitivas HTML.

Al igual que las tablas, el grid layout permite a un autor alinear elementos en columnas y filas. Sin embargo, con CSS grid son posibles muchos más diseños y de forma más sencilla que con las tablas. Por ejemplo, los elementos secundarios de un contenedor de cuadrícula podrían posicionarse para que se solapen y se superpongan, de forma similar a los elementos posicionados en CSS.

¿Como comenzar con CSS Grid?

La mejor manera para poder entender bien CSS grid es tener claros los conceptos básicos tales como:

Otros conceptos a tener en cuenta son:

Recordemos que al trabajar en con CSS Grid nos referimos en inglés a líneas y columnas:

Untitled

Propiedades de Grid


Propiedades del contenedor

Propiedades de alineación

Propiedades de ubicación

Power ups de Grid


Funciones especiales

Keywords especiales