Implicit/Explicit Grids

implicit-explicit-grids.markdown

Implicit/Explicit Grids

A Pen by Ankit Jindal on CodePen.

License.

index.html

<div class="container">
  <div class="item item--1">Modern</div>
  <div class="item item--2">CSS</div>
  <div class="item item--3">with</div>
  <div class="item item--4">flexbox</div>
  <div class="item item--5">and</div>
  <div class="item item--6">Grid</div>
  <div class="item item--7">is</div>
  <div class="item item--8">great</div>
</div>

style.scss

.container {
  width: 1000px;
  margin: 30px auto;
  background: #eee;
  height: 1000px;

  display: grid;
  grid-gap: 20px;
  grid-template-rows: repeat(2, 100px);
  grid-template-columns: repeat(2,200px);
  grid-auto-rows: 80px;
  
  grid-auto-flow: row dense; //by default row
  grid-auto-columns: .5fr;
  
  // align grid items to grid areas
  // align-items: center; // default stretch , other values - center, end. start
  // justify-items: center; // default stretch, other values - center, end. start
  
  // align grid tracks to grid container
    justify-content: space-evenly;
    align-content: center;
  
    .item {
      padding: 20px;
      color: #fff;
      font-family: sans-serif;
      font-size: 24px;
      background-color: orangered;
      
      &--4 {
        background: crimson;
        grid-row: 2/ span 3;
      }
      &--6 {
        background: lightcoral;
        grid-row: 2/span 2;
      }
      &--7 {
        background: palevioletred;
        grid-column: 1/ -1;
        align-self: start;
      }
  }
}