grid-template-areas css
/* 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;
.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";
}#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;
}
Also in CSS:
- css box model
- keep aspect ratio of image css
- css focus border radius
- background url css
- css translate3d
- cursor as image css
- how to hover over an individual cell in table css
- css transparent background color
- how to use direct child for ol in css
- text animation css
- !important in css
- line-height css
- css space between elements
- css click event jquery
- css :focus
- embed google font css
- css custom bullet list
- css before is not working
- fabric bring to front element top
- HOW TO REDUCE BACKGROUND IMAGE SIZE IN CSS
- fixed footer in css
- css font families
- html5 snippet
- css backdrop filter grayscale