DEV Community

loading...

Build your own grid with flexbox

hybrid_alex profile image Alex Carpenter Updated on ・1 min read

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%;
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Helpful links:

Discussion (4)

pic
Editor guide
Collapse
equinusocio profile image
Mattia Astorino

Flexbox is not for grid 👍🏻

Collapse
hybrid_alex profile image
Alex Carpenter Author

How so? I use this same grid setup with flexbox everyday at my job.

Collapse
equinusocio profile image
Mattia Astorino • Edited

Read about grid-layout and 2 dimensional spaces. Flexbox is content and flow based.

Collapse
prol profile image
Danny Prol

Wow, this is so useful.