// Half columns that break into their own row on mobile screens %layout-two-columns { display: flex; flex-wrap: wrap; justify-content: space-between; .layout-col { flex-basis: 48%; max-width: 48%; margin: 25px 0; @include atMobile { flex-basis: 100%; max-width: 100%; } } } // Four columns that stack next to each other on desktop screens, // break into half columns on medium & tablet sizes, then break // into their own row like the half columns above %layout-four-columns { display: flex; flex-wrap: wrap; justify-content: space-between; .layout-col { flex-basis: 24%; max-width: 24%; @include atMobilePlus { flex-basis: 48%; max-width: 48%; margin: 12.5px 0; } @include atMobile { flex-basis: 100%; max-width: 100%; } } }

Quick Note: The atSmall type mixins are just basic media queries.

Since these kinds of layouts are common, they also need to be overwritable if I want to change the spacing. Generally, the ‘default’ spacing is defined in the extend/mixins.

Example Use Cases

<div class="layout-two-cols"> <div class="layout-col"> <!-- content --> </div> <div class="layout-col"> <!-- content --> </div> </div>

To get the layout working, you only need a container class and two sections with the layout-col class.

You can also directly extend it inside a scss file like so:



.layout-two-col { @extend %layout-two-cols; }