Notes on CSS Grid

Edit on Github
css-sass/CSS_Grid-notes.md
Apr 18, 2018
CSS & Sass 
display: grid;
grid-template-columns: repeat(12, 1fr); /* repeat this pattern 12 times, i.e. 12 columns of 1fr width */
grid-gap: 1rem;
  • grid-gap has been renamed to gap in the spec
grid-template-columns: 10% 2fr 3fr; /* first column is 10%, second and third are 2fr and 3fr of the remaining width */

.col-4 {
  grid-column: span 4; /* span 4 columns of the grid */
}

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

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