Posted on Dec 26, 2017 • Edited on Dec 28, 2017

Build your own grid with flexbox

There are plenty of ways to layout content on a website. Most revolve around some type of grid setup. In this screencast I walk through a simple and effective way to build your own grid setup using flexbox.

Here is the CSS needed to get you started:

:root { --grid-gutter: 20px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } .o-grid { display: flex; flex-wrap: wrap; margin-bottom: calc(var(--grid-gutter) * -1); margin-right: calc(var(--grid-gutter) * -1); margin-left: calc(var(--grid-gutter) * -1); } .o-grid__cell { width: 100%; margin-bottom: var(--grid-gutter); padding-right: var(--grid-gutter); padding-left: var(--grid-gutter); } @media screen and (min-width: 700px) { .u-md-width-6of12 { width: 50%; } }

and the markup:

<div class="o-grid"> <div class="o-grid__cell u-md-width-6of12"> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil deleniti, nesciunt magnam iusto exercitationem fuga at ipsa laborum autem. Assumenda impedit vel nam illum molestiae architecto hic commodi corrupti rem.</p> </div> <div class="o-grid__cell u-md-width-6of12"> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil deleniti, nesciunt magnam iusto exercitationem fuga at ipsa laborum autem. Assumenda impedit vel nam illum molestiae architecto hic commodi corrupti rem.</p> </div> </div>