CSS Grid Systems Cheatsheet

Posted Thursday, March 17, 2022 by Sri.Tagged MEMO, CHEATSHEET
EDIT STATUS:new

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 / 2 and 2 / 3 respectively.

Grids Inside of Grids

...