CSS Grid F.U.N

Learning the CSS grid, by making a grid system. Nice, eh?

by Jesper Brinch Korsbakke

HTML

<div class="grid">
  <div class="col col-12">
    <ul>
      <li>Stuff 1</li>
      <li>Stuff 2</li>
      <li>Stuff 3</li>
      <li>Stuff 4</li>
    </ul>
  </div>
</div>


<div class="grid">
    <div class="col col-12 col-6@m col-9@l">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores ab voluptate iste nam aut aspernatur ratione non, delectus neque explicabo temporibus pariatur deleniti accusantium voluptatem autem perspiciatis quo cupiditate! Ad!</p>
    </div>
    <div class="col col-12 col-6@m col-3@l">
      <img src="https://unsplash.it/470/300/?random" alt="">
    </div>
    
    
    <div class="col col-12 col-8@m col-3@l order-2@s">
      <img src="https://unsplash.it/470/300/?random" alt="">
    </div>
    
    <div class="col col-12 col-4@m col-9@l">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi distinctio voluptate eveniet, soluta labore laboriosam quo, molestias temporibus? Architecto cumque corrupti at eius ducimus nihil quas blanditiis similique eos fugiat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem similique, alias. Nulla vel odit provident quo optio exercitationem doloremque obcaecati omnis quisquam reprehenderit dicta eos quia, nam voluptatem, repellendus voluptatibus.</p>
    </div>
</div>

SCSS

$numbers: "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12";


body {
  font-size: 16px;
}
img {
  max-width: 100%;
}

ul {
  list-style: none;
   li {
     display: inline-block;
     & + li {
       padding-left: 10px;
     }
   }
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  max-width: 1200px;
  margin-bottom: 1rem;
  padding: 0 15px;
}

.col {
  color: #fff;
  padding: 1rem;
  background: dimgray;
}

@each $width in $numbers {
  .col-#{$width} {
    grid-column: span #{$width};
  }
}

// class for grid item ordering. Add more numbers for more ordering options (i.e. 5, 6, 7, 8 etc.)
@each $number in $numbers {
  .order-#{$number} {
    order: #{$number};
  }
}

// ========= SMALL ==========
@media (max-width: 39.9375em) {
  @each $width in $numbers {
    .col-#{$width}\@s {
      grid-column: span #{$width};
    }
  }
  
  // class for grid item ordering. Add more numbers for more ordering options (i.e. 5, 6, 7, 8 etc.)
  @each $number in $numbers {
    .order-#{$number}\@s {
      order: #{$number};
    }
  }
}


// ========= MEDIUM ==========
@media (min-width: 40em) {
  @each $width in $numbers {
    .col-#{$width}\@m {
      grid-column: span #{$width};
    }
  }
  
  @each $number in $numbers {
    .order-#{$number}\@m {
      order: #{$number};
    }
  }
}



// ========= LARGE ==========
@media (min-width: 64em) {
  @each $width in $numbers {
    .col-#{$width}\@l {
      grid-column: span #{$width};
    }
  }
  
  @each $number in $numbers {
    .order-#{$number}\@l {
      order: #{$number};
    }
  }
}



// ========= XTRA LARGE ==========
@media (min-width: 90em) {
  @each $width in $numbers {
    .col-#{$width}\@xl {
      grid-column: span #{$width};
    }
  }
  
  @each $number in $numbers {
    .order-#{$number}\@xl {
      order: #{$number};
    }
  }
}