Domina CSS Grid Layout y crea layouts web responsivos de forma
sencilla. Diseña sitios web adaptables a cualquier dispositivo con CSS
Grid Layout. Crea diseños flexibles y personalizados utilizando filas y
columnas . Explora cómo usar selectores y propiedades para organizar tu
contenido en una estructura de cuadrícula y diseñar interfaces modernas.
El módulo CSS Grid Layout es un sistema de diseño que permite crear
complejas interfaces y diseños responsivos utilizando una estructura de
filas y columnas
Un elemento HTML se convierte en un contenedor de cuadrícula cuando su
propiedad de visualización se establece en cuadrícula o cuadrícula en
línea.
Utilizamos la propiedad grid-column para especificar dónde colocar un elemento.
Por ejemplo, en la estructura web anterior de 6 columnas, el elemento 1 comenzará en la columna 1
y terminará antes de la columna 5
Los estilos que ya definen los divs en el orden en que deben aparecer en
la página (orden del código fuente). Sin embargo, la sintaxis es:
inicio-fila-cuadrícula | inicio-columna-cuadrícula | final-fila-cuadrícula | final-columna-cuadrícula.
El elemento 20 comenzará en la línea de fila 1 y la línea de columna 2, y terminará
en la línea de fila 5, línea de columna 6