Grid por áreas

<< Posición items Grid linename >>

Hemos visto cómo definir un grid con grid-template-rows y grid-template-columns. Tenemos la posibilidad de definir un grid definiendo un área donde colocar un ítem mediante las propiedades grid-template-areas. para definir las áreas del grid, cada una debe ir entre comillas y por filas. Y la propiedad grid-area se emplea colocar esos elementos en el área definida previamente (aquí no va entre comillas), y se utiliza sobre los ítems hijos del grid. Veamos un ejemplo donde nos estemos creando un grid con áreas.

.container{
    display: grid;
    grid-template-areas: "arriba arriba" "centroIzda centroDcha" "abajo abajo";
}
.items{
    color: white;
    font-weight: bold;
}
.item1{ grid-area: arriba; background: red;}
.item2{ grid-area: centroIzda; background: green;}
.item3{ grid-area: centroDcha; background: blue;}
.item4{ grid-area: abajo; background: orange;}

Con el código anterior lo que tenemos es que el ítem1 ocupa toda la primera fila, el ítem2 la parte izquierda del centro, el ítem3 la parte derecha del centro, dejando al ítem4 toda la parte de abajo.

Como vemos, en la propiedad grid-template-areas, cada una de las cadenas corresponde a una fila. Si hubiéramos puesto una palabra sola dentro de esa cadena me estaría creando una fila con una sola columna. Al haber puesto dos palabras en cada string, le estoy diciendo que se crearán filas con dos columnas. La agrupación de las celdas puede ser tanto vertical como en horizontal.

.container{
    display: grid;
    grid-template-areas: "arriba arriba" "centroIzda centroDcha" "centroIzda abajoDcha";
}
.item1{ grid-area: arriba; background: red;}
.item2{ grid-area: centroIzda; background: green;}
.item3{ grid-area: centroDcha; background: blue;}
.item4{ grid-area: abajoDcha; background: orange;}

<< Posición items Grid linename >>