CSS Grid layout contiente funciones de diseño dirigidas a los desarrolladores de aplicaciones web. El CSS grid se puede utilizar para lograr muchos diseños diferentes. Destaca por dividir una página en regiones principales, o 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, son posibles más diseños o más sencillos con CSS grid que como lo eran con las tablas. Por ejemplo, los elementos secundarios de un contenedor de cuadrícula podrían posicionarse de manera que se solapen y se superpongan, similar a los elementos posicionados en CSS.
Código:
div.Ejemplo{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
div.uno{
grid-column: 1 / 3;
grid-row: 1;
background-color: maroon;
}
div.dos{
grid-column: 2 / 4;
grid-row: 1 / 3;
background-color: brown;
}
div.tres{
grid-column: 1;
grid-row: 2 / 5;
background-color: red;
}
div.cuatro{
grid-column: 3;
grid-row: 3;
background-color: orangered
}
div.cinco{
grid-column: 2;
grid-row: 4;
background-color: orange
}
div.seis{
grid-column: 3;
grid-row: 4;
background-color: yellow;
}