Notes

Notes on CSS Grid

Edit on GitHub

CSS & Sass
1display: grid;
2grid-template-columns: repeat(12, 1fr); /* repeat this pattern 12 times, i.e. 12 columns of 1fr width */
3grid-gap: 1rem;
  • grid-gap has been renamed to gap in the spec
1grid-template-columns: 10% 2fr 3fr; /* first column is 10%, second and third are 2fr and 3fr of the remaining width */
1.col-4 {
2  grid-column: span 4; /* span 4 columns of the grid */
3}

You can set defaults for when your grid overflows, i.e. when there needs to be more rows than what you originally defined

1.grid {
2  grid-auto-rows: 200px; /* all extra rows should be 200px */
3  grid-auto-columns: 100px; /* all extra columns should be 100px */
4  
5/* the values could be em, px, whatever as well as `min-content` and `max-content` */
6}