Módulo de CSS dedicado a la organización de elementos en una página.

El sistema Grid permite definir una cuadrícula bidimensional

• Soporte de Grid en navegadores

Para usar grid, se utiliza la propiedad display con el valor grid en el elemento que haga de contenedor:

body {
    display: grid;
}

Si fueran varios cojntenedores grid para mostrar en línea: display: inline-grid.

A continuación es necesario espeficiar una plantilla de columnas o filas. Si queremos 12 columnas de igual tamaño:

body {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

Para las filas, usaríamos grid-template-rows.

• grid-column-start
• grid-column-end
• grid-column es una combinación de las dos anteriores

Si tenemos una rejilla de 12 columnas y queremos que un elemento ocupe 3 columnas:

.feature {
    grid-column-end: span 3;
}