grid template areas
/* Keyword value */ grid-template-areas: none; /* <string> values */ grid-template-areas: "a b"; grid-template-areas: "a b b" "a c d"; /* Global values */ grid-template-areas: inherit; grid-template-areas: initial; grid-template-areas: unset;
Source: developer.mozilla.org
grid template areas
#page { display: grid; width: 100%; height: 250px; grid-template-areas: "head head" "nav main" "nav foot"; } #page > header { grid-area: head; background-color: #8ca0ff; } #page > nav { grid-area: nav; background-color: #ffa08c; } #page > main { grid-area: main; background-color: #ffff64; } #page > footer { grid-area: foot; background-color: #8cffa0; }
Source: developer.mozilla.org
grid template areas
css grid
grid-template-areas
wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" "ft ft ft ft ft ft ft ft ft"; }
Source: blog.duda.co
how to use a blank space with grid template areas css
.container { display: grid; grid-template-columns: 2fr 2fr 1fr 2fr; grid-template-rows: 100px 200px 100px; grid-template-areas: "head head . side" "main main . side" "footer footer footer footer"; }
Source: alligator.io