css grid area template code example
Example 1: grid-template-areas css
#page {
display: grid;
width: 100%;
height: 250px;
grid-template-areas: "head head"
"nav main"
"nav foot";
grid-template-rows: 50px 1fr 30px;
grid-template-columns: 150px 1fr;
}
#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;
}
Example 2: unknown property grid-template-areas
.sidebar{
grid-area:sidebar;
background:aqua;
}
.grid_container{
display:grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 1fr 3fr;
grid-template-areas:
"sidebar ."
"sidebar .";
background:pink;
height:300px;
}
Example 3: grid template areas
grid-template-areas: none;
grid-template-areas: "a b";
grid-template-areas: "a b b"
"a c d";
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: unset;