Building a semantic grid with mixins

In the Building a grid with grid classes recipe of this chapter, you can read how to build a grid with CSS grid classes. Using these grid classes on the div elements breaks the semantic nature of HTML5. In this recipe, you will learn how to keep the HTML5 semantic tags intact when deploying a grid.

Getting ready

In this recipe, you will have to use the code from the Building a grid with grid classes and Creating responsive grids recipes of this chapter. You will use the Ruby Sass compiler as described in Chapter 1, Getting Started with Sass, to compile your CSS code.

How to do it...

Learn how to set up a semantic grid by performing the step beneath:

1. Leverage the SCSS code from the Building a grid with grid classes and Creating responsive grids recipes, and edit the sass/layout/_grid.scss file so that it contains the following SCSS code:

   @mixin set-span($col-number) {
     flex-basis: ((100% / $grid-columns) * $col-number);
     max-width: ((100% / $grid-columns...