resources: gridbyexample, guide to css grid
The Basic Screen Sized Grid
This defines a 4-element gridded layout, with a full-width header and footer stacked on top of a left/right element.
<!-- HTML for 4-element screen-size grid -->
<div class='fullScreenGrid'>
<div class='header' />
<div class='left'/>
<div class='right'/>
<div class='footer'/>
</div>/* CSS fpr 4-element screen-size grid */
.fullScreenGrid {
display: 'grid';
width: '100vw';
height: '100vh';
grid-template-rows: 'auto 1fr auto'; /* 3 rows */
grid-template-columns: '50% auto'; /* 2 cols */
}
.header, .footer {
grid-column: 1 / 3;
}
.left {
grid-column: 2 / 3;
}
.right {
grid-column: 1 / 2;
}
Setting up the parent grid consists of defining the size of the grid using width and height, then specifying the number of grid units per row and column.
width, height
For a full-screen app, use 100vw and 100vh
grid-template-row
Layout sizing rules for row. auto 1fr auto would set three rows, with the sizing "size to fit content" on top and bottom, and the middle taking up the 1 fractional unit out of 3.
grid-template-columns
Layout sizing rules for column. 50% auto would set two columns, with the leftmost column set to 50% with and the right taking up whatever remains (also 50%).
The child items of the CSS Grid will be placed within the boundaries of the edges defined by the number of rows and columns (e.g. two elements side by side hae three edges: left, middle, right).
The Grid layout algorithm will put one child per grid unit unless the child item specifies its size:
grid-rows
The start / end grid edge of the row. There are N+1 edges for N rows, with the leftmost edge as 1.
grid-columns
The start / end grid edge of the column. There are N+1 edges for N columns, with the topmost edge as 1.
Things to Notice
- There are no multi-row spans so the child items do not use
grid-rows. - The header and footer span across all three columns; this is
grid-columns: 1 / 3. - The middle row contains a left and right grid cell defined with
grid-columns: 1 / 2and2 / 3respectively.
Grids Inside of Grids
...