Grid

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;
}

body {
    display: grid;
    grid-template-areas:
        "title  title .   .    ."
        ".      date  .   desc desc"
        "attend .     .   desc desc"
        ".      img   img .    ."
        ".      img   img .    footer";
}

Habremos construidos una cuadrícula de 5 columnas y 5 filas. Para indicar qué elemento se colocará dónde, le indicamos el nombre del área que usamos en la plantilla:

h1 {
    grid-area: title;
}
time {
    grid-area: date;
}
.desc {
    grid-area: desc;
}
.attend {
    grid-area: attend;
}
.img {
    grid-area: img;
}
footer {
    grid-area: footer;
}

• grid-auto-flow

Para definir una rejilla implícita, estableceremos el flujo automático de elementos en filas y permitiremos que rellenen huecos cambiando el orden si es necesario (dense):

main {
    display: grid;
    grid-auto-flow: row dense;
}

grid-template-columns: repeat(auto-fit, 350px);

Con auto-fit estamos indicando que se calcule el número de columnas necesario para rellenar los espacios.

Tamaño de pistas dinámico:

grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

Esto nos definirá cuantas columnas sean necesarias de idéntico ancho de forma que rellenen el contenedor.