La grid CSS o diseño de cuadrícula es una solución de diseño que ayuda a controlar el tamaño y la ubicación de los elementos de una página web.
Una grid es muy flexible, una de sus principales funciones es facilitar el diseño de una página, para ello se vale de filas y columnas igual que las tablas.
Para configurar una cuadricula tenemos que definir un elemento div principal (que será el contenedor de la cuadrícula) y uno o más div secundarios que serán los elementos de la cuadrícula.
Veamos un ejemplo.
Para crear una grid lo primero es definir el display como grid
Display: grid;
Lo segundo es definir la plantilla con grid-template-columns
Grid-template-columns: auto auto auto;
Con esto estamos definiendo un grid de tres columnas que ocupe todo el espacio de la pantalla
La distancia entre una fila y una columna se llama espacio y se puede ajustar con:
grid-column-gap: define el espacio entre columnas.
grid-row-gap: establece el espacio entre filas.
Grid columns
Grid rows
Grid gaps
El tamaño del gap se puede ajustar con:
Column-gap
Row-gap
Gap
Grid lines
Entre las columnas y las filas hay unas líneas llamadas de columna y de fila.
No hay comentarios:
Publicar un comentario