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>
Helpful links:
Top comments (4)
Flexbox is not for grid 👍🏻
How so? I use this same grid setup with flexbox everyday at my job.
Read about grid-layout and 2 dimensional spaces. Flexbox is content and flow based.
Wow, this is so useful.