Mastering Sass

Testing the grid

So let's test it all by creating a few rows of columns which will apply a different number of spans for each column at each breakpoint. Let's say we want a section of four columns. On a mobile, each column will be full width. We'll leave out the col-n-medium class so our col-n-small styles will carry on up through to the large breakpoint. And finally, on large screens we will have four columns. You'll also see how using the col-n-size-last classes will give us full control of our columns at every possible size and number of columns.

Add the following markup just before the closing </main> tag in index.html:

<section class="services container"> <article class="col-12 col-6-small col-3-large"> <h3>Service One</h3> <p> Lorem ipsum ...