HTML and CSS Reference
In-Depth Information
layout with four rows, but you also assign a two-column, three-row lay-
out to the
<div>
element:
body {
display: grid;
grid-columns: auto 1fr;
grid-rows: auto 1fr 1fr auto;
}
div {
display: grid;
grid-columns: 1fr 1fr;
grid-rows: 1fr 1fr 1fr;
}
Now distribute the elements around the grid, making the
<div>
span
two rows:
header { grid-column: 1; grid-row: 1; grid-column-span: 2; }
aside:nth-of-type(1) { grid-column: 1; grid-row: 2; }
aside:nth-of-type(2) { grid-column: 1; grid-row: 3; }
footer { grid-column: 1; grid-row: 4; grid-column-span: 2; }
div { grid-column: 2; grid-row: 2; grid-row-span: 2; }
Because the
<article>
elements are all children of the
<div>
element, the
row and column references are for the grid defined on the
<div>
:
article { min-height: 2em; }
article:nth-child(1) { grid-column: 1; grid-row: 1; }
article:nth-child(2) { grid-column: 2; grid-row: 1; }
article:nth-child(3) { grid-column: 1; grid-row: 2; }
article:nth-child(4) { grid-column: 2; grid-row: 2; }
article:nth-child(5) { grid-column: 1; grid-row: 3; }
article:nth-child(6) { grid-column: 2; grid-row: 3; }
See the full listing in ch08/grid-align-3.html.
The ability of the grid-based layouts to rearrange content with only
CSS
makes them an ideal complement to media queries. You'll now
adapt the previous example to make it respond to media queries.
Here's what the layout will look like at lower screen resolutions (see
the full listing in ch08/grid-align-4.html).
