Build your own grid with flexbox

#css #flexbox #grid

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>