HTML and CSS Reference
In-Depth Information
A grid is created by defining a set of rows and (or) columns. In this
example, you'll go ahead and create three columns and three rows on
the
<body>
element:
body {
display: grid;
grid-columns: auto 1fr auto;
grid-rows: auto 1fr auto;
}
The first and last rows and columns will shrink to fit their content
(
auto
), and the middle cell of each column will flex so the whole thing
takes up all available space. These declarations create a conceptual grid
into which to fit elements. All that remains is to assign the elements to
the relevant spots of the grid:
header { grid-column: 1; grid-row: 1; grid-column-span: 3; }
aside.b { grid-column: 1; grid-row: 2; }
article { grid-column: 2; grid-row: 2; }
aside.d { grid-column: 3; grid-row: 2; }
footer { grid-column: 1; grid-row: 3; grid-column-span: 3; }
Note that unlike with display: table, it's possible to have elements span-
ning multiple slots in the layout. This means far less messing around
with wrapper elements to control the styling.
As with template layouts, you can rearrange the content by modifying
the
CSS
. Here the main content is moved into the top three slots:
header {
grid-column: 1;
grid-row: 2;
}
aside.b {
grid-column: 2;
grid-row: 2;
}
