O'Reilly logo

Mastering Sass by Luke Watts

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required