CSS Grid

css-grid.markdown

CSS Grid

index.html

<div class="parent container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

style.scss

// The good stuff CSS Grid
// Can you make a responsive site with 3 lines of CSS? YES!
// without media queries? YES!
// WOW ooohhhh ***CSS grid*** :)
.parent {
  // display as a Grid
  display: grid;
  
  // add rows & columns (can't use rem unit)
  // grid-template-columns: 100px 100px 200px;
  
  // make it responsive (flexible)
  // 3 columns each taking up the same space
  // grid-template-columns: 1fr 2fr 1fr;
  
  // add space around child items
  grid-gap: .5rem;
  
  // make the 2nd item take up twice as much space as others
  // grid-template-columns: 1fr 2fr 1fr;
  
  // add rows (no rem unit)
  // grid-template-rows: 80px 120px 30px 250px;
  
  // repeat = as many times as you can fit
  // auto-fit = fit as many items on the line as possible, go bigger if you need to
  // minmax = (min size, max size) = the minimum size the column should be is 200px, but if there's space then give them all 1fr of that width.
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

// default container class
.container {
  width: 96%;
  max-width: 50rem;
  margin: 1rem auto;
}

.child {
  height: 6.25rem;
  background-color: #39beef;
  
  &:nth-child(even) {
    background-color: #a5e1f7;
  }
}