HTML and CSS Reference
In-Depth Information
#blogPage > #bloghistory {
grid-column: 3;
grid-row: 2;
border: 1px dotted black;
}
</style>
<body>
<div id="blogPage">
<header>My Blog Header</header>
<article>My Blog's Main Body</article>
<footer>My Blog Footer</footer>
<aside id="calendar">A calendar</aside>
<aside id="blogRoll">My favorite blogs</aside>
<aside id="aboutMe">Who am I?</aside>
<aside id="bloghistory">My blog history</aside>
</div>
</body>
Since you are producing a real webpage that will hold real content, the appropriate
semantic tags are being used. You can see from looking at the HTML portion of the code
that there is no indication to layout. You have defined only a series of sections for the page
to display. All the layout implementation happens in the CSS. You will notice the addition of
two CSS properties to your repertoire:
grid-row-span
and
grid-column-span
. As their names
suggest, you can expect them to behave the same way as the HTML attributes
colspan
and
rowspan
. They tell the browser to lay out the column or the row such that it spans the speci-
fied number of columns or rows. When you run this code in the browser you will get the
output displayed in Figure 4-48.
FIGURE 4-48
The webpage layout using only the CSS3 grid layout
Search WWH ::
Custom Search