viewport - the area of the window in which web content can be seen. We use the dimensions of the viewport (usually the width, but sometimes the height) as the basis of our media queries.
/* Anything smaller than first breakpoint 600px */
.container {
// rules for small screen
}
/* Medium Screens */
@media (min-width: 600px) and (max-width:900px) {
.container {
// rules for medium-sized screen
}
}
/* Large Screens */
@media (min-width:901px) {
.container {
// rules for large screen
}
}
/* Mobile first */
.container{
display:grid;
grid-template-columns: 300px 300px 300px;
grid-template-rows: 250px 600px;
border: 2px solid yellow;
/* Use grid-template-area to create a mobile layout where each named space occupies its own row */
grid-template-areas:
"hd hd hd "
"sd sd sd"
"main main main"
"ft ft ft";
}
.box{
border: 1px solid red;
background: #F8FA9D;
}
.header{
grid-area:hd;
}
.footer{
grid-area: ft;
}
.sidebar{
grid-area: sd;
}
.content{
grid-area: main;
}
/* If Screen Is Wide Enough */
@media(min-width:900px){
.container{
display:grid;
grid-template-columns: 300px 300px 300px;
grid-template-rows: 250px 600px;
grid-template-areas:
"hd hd hd hd hd hd hd hd"
"sd sd main main main main main main"
"ft ft ft ft ft ft ft ft";
border: 2px solid red;
}
}
Further Research
Nesting Grids
Nesting CSS grids is simple and can be done simply by using the display:grid rule for both a parent and child element.
.container{
display:grid;
grid-template-columns: 300px 300px 300px;
grid-template-rows: 250px 600px;
/* grid-template-columns: repeat(3, 1fr); */
/* Initially each element has its own row for small screens */
grid-template-areas:
"hd"
"sd"
"main"
"ft";
border: 2px solid yellow;
}
/* add css for nested grid here */
.nestedGrid{
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
}
.nestedGrid > *{
border: 2px solid aquamarine;
}
.box{
border: 1px solid red;
background: #F8FA9D;
}
.header{
/* row start/column start/ row end/ column end */
grid-area:hd;
}
.footer{
grid-area: ft;
}
.sidebar{
grid-area: sd;
}
.content{
grid-area: main;
}
/* If Screen Is Wide Enough */
@media(min-width:900px) {
.container{
display:grid;
grid-template-columns: 300px 300px 300px;
grid-template-rows: 250px 600px;
grid-template-areas:
"hd hd hd hd hd hd hd hd"
"sd sd main main main main main main"
"ft ft ft ft ft ft ft ft";
border: 2px solid red;
}
}
Media Queries are actually a vast landscape of possibility, most of which you will probably never use - but, having a strong grasp of media queries and responsive breakpoints is essential for a web developer. For more information see the .