HTML and CSS Reference
In-Depth Information
header { grid-column: 1; grid-row: 1; grid-column-span: 2; }
#sidebar { grid-column: 1; grid-row: 2; grid-rowspan: 2; }
#content1 { grid-column: 2; grid-row: 2; }
#content2 { grid-column: 2; grid-row: 3; }
footer { grid-column: 1; grid-row: 4; grid-column-span: 2; }
}
This
CSS
defines a three-column grid for windows wider than 760 pix-
els. Again, the slot locations have to be explicitly set:
@media screen and (min-width: 760px) {
body {
grid-columns: auto 1fr 1fr;
grid-rows: auto 1fr auto;
}
header { grid-column: 1; grid-row: 1; grid-column-span: 3; }
#sidebar { grid-column: 1; grid-row: 2; }
#content1 { grid-column: 2; grid-row: 2; }
#content2 { grid-column: 3; grid-row: 2; }
footer { grid-column: 1; grid-row: 3; grid-column-span: 3; }
}
Grids offer great flexibility in laying out elements on the page and
solve nearly all the issues designers had with CSS layouts compared to
table
—
based layouts. But the elements being laid out are still
essentially square boxes with a fixed amount of content. In the next
section, you'll learn about a proposal that lets you fit your content
into any shape and spread it across multiple elements.
Controlling content flow with CSS3 Regions
In print-publishing tools such as Adobe
InDesign, it's common to create several
text boxes and then link them together
so the content added to them automati-
cally overflows from one box to the next.
In this paradigm, text flows automati-
cally from one region of the page to
another and from one page to another—
you don't need to calculate how much
text will fit in each region. You specify
some text and a collection of regions,
and the application takes care of the rest.
Full
Partial
-
19.0
-
-
-
10.0
-
-
-
5.2
