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.
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 command-line lessc
compiler.
You need to perform the following steps:
Leveraging the Less code from the Building a grid with grid classes and Creating responsive grids recipes, you can create a file called
grid.less
that will contain the following Less code:@grid-columns: 4; @basefontsize: 16px; @sm-breakpoint: unit((768px / @basefontsize), em); .set-span(@col-number) { flex-basis: ((100% / @grid-columns) * @col-number); max-width: ((100% / @grid-columns) * @col-number...