Applying the grid on your design

In this recipe, you will learn how to build a layout using the flexbox code you have already built in the preceding recipes of this chapter.

Getting ready

Read Chapter 1, Getting Started with Sass to find out how to compile your CSS code using Ruby Sass. You will reuse the code from the Building a grid with grid classes recipe of this chapter.

How to do it...

You need to perform the following steps to apply the grid on your design:

1. Copy the files of the Building a grid with grid classes recipe of this chapter into your working directory. Your file and directory structure should look like that shown in the following figure:

   

2. Now edit the sass/layout/_grid.scss file. Write down the following SCSS code at the end of this file:

   @mixin make-cols($grid) { 
     @for $col-number from 1 through $grid-columns {
       @include make-column($grid, $col-number);
     } 
   }
   
   @include make-cols(xs);
   
   @media (min-width: $sm-breakpoint) {
     @include make-cols(sm);
   }
   
   @media (min-width: ...