Use CSS3 in applications - Programming in HTML5 with JavaScript and CSS3 - page 293

your CSS code to include media queries. The following code adds a media query to apply the
default layout to larger screens such as desktops or laptops:
@media screen and (min-width: 1200px) {
#blogPage {
display: -ms-grid;
grid-columns: 15% 1fr 25%;
grid-rows: (20%)[5];
width: 90%;
height: 95%;
border: 1px dotted black;
margin: auto;
}
#blogPage > header {
grid-column: 1;
grid-column-span: 3;
grid-row: 1;
border: 1px dotted black;
}
#blogPage > footer {
grid-column: 1;
grid-row: 5;
grid-column-span: 3;
border: 1px dotted black;
}
#blogPage > article {
grid-column: 2;
grid-row: 2;
grid-row-span: 3;
border: 1px dotted black;
}
#blogPage > #calendar {
grid-column: 3;
grid-row: 3;
border: 1px dotted black;
}
#blogPage > #blogRoll {
grid-column: 3;
grid-row: 4;
border: 1px dotted black;
}
#blogPage > #aboutMe {
grid-column: 1;
grid-row: 2;
grid-row-span: 3;
border: 1px dotted black;
}
#blogPage > #bloghistory {
grid-column: 3;
grid-row: 2;
border: 1px dotted black;
}
}