HTML and CSS Reference
In-Depth Information
article {
grid-column: 1;
grid-row: 1;
grid-column-span: 3;
}
aside.d {
grid-column: 1;
grid-row: 3;
grid-column-span: 3;
}
footer {
grid-column: 3;
grid-row: 2;
}
Note that even though grid
—
align gives you the opportunity to
completely separate your markup from the layout, this doesn't mean you
should throw your content into the HTML willy
—
nilly. Remember that many
users of your content, such as screen
—
reader users and search engines,
don't care too much about the layout you've achieved with CSS—your
content should make sense in the order it appears in your markup.
More complex layouts are possible if you nest elements. Adjust the
body of your example page to contain the following markup; you'll
then use a nested grid to lay out the content elements:
<header>Header</header>
<aside>Side bar 1</aside>
<div>
<article>Content 1</article>
<article>Content 2</article>
<article>Content 3</article>
<article>Content 4</article>
<article>Content 5</article>
<article>Content 6</article>
</div>
<aside>Side bar 2</aside>
<footer>Footer</footer>
The relevant
CSS
(excluding some rules to add fonts, borders and pad-
ding) is shown next. The
<body>
element this time contains a two-column
