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

This produces the output in Figure 4-48. As long as the screen is at least 1,200 px wide,
this layout will be applied. However, as the screen gets smaller, on a tablet for example, the
user interface starts to get less user friendly. To accommodate a tablet screen, you can adjust
the layout a bit by adding the following CSS code to the page:
@media screen and (max-width: 1199px) and (min-width: 401px) {
#blogPage {
display: -ms-grid;
grid-columns: 75% 1fr;
grid-rows: (20%)[6];
width: 90%;
height: 95%;
border: 1px dotted black;
margin: auto;
}
#blogPage > header {
grid-column: 1;
grid-column-span: 2;
grid-row: 1;
border: 1px dotted black;
}
#blogPage > footer {
grid-column: 1;
grid-row: 6;
grid-column-span: 2;
border: 1px dotted black;
}
#blogPage > article {
grid-column: 1;
grid-row: 3;
grid-row-span: 3;
border: 1px dotted black;
}
#blogPage > #calendar {
grid-column: 2;
grid-row: 4;
border: 1px dotted black;
}
#blogPage > #blogRoll {
grid-column: 2;
grid-row: 5;
border: 1px dotted black;
}
#blogPage > #aboutMe {
grid-column: 1;
grid-row: 2;
grid-column-span: 2;
border: 1px dotted black;
}
#blogPage > #bloghistory {
grid-column: 2;
grid-row: 3;
border: 1px dotted black;
}
}