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

With this code, you can restructure the layout of the grid based on the different screen
size. The output of this code produces a user interface shown in Figure 4-50.

FIGURE 4-50

The layout of the blog is adjusted for the tablet screen size

Now you have the desktop-size screen and tablet-size screen looking good. The next one
to account for is the smaller smart phone screen. Add the following code to your CSS to place
a media query for the smaller screen size:

@media screen and (max-width: 400px) {
#blogPage {
display: grid;
grid-columns: 50% 50%;
grid-rows: 15% 15% 1fr 15% 15%;
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: 5;
grid-column-span: 2;
border: 1px dotted black;
}
#blogPage > article {
grid-column: 1;
grid-row: 3;
grid-column-span: 2;
border: 1px dotted black;
}