CSS grids are great, but a whole framework (Bootstrap, Foundation, etc) for a simple grid is unnecessary – many mbs and thousands of lines of code for a little organization and responsiveness?!
This is a simple grid I’ve been using in a few lines of scss:
And here is how it’s used:
Done. Mobile-first, responsive columns. Above 700px (or whatever is specified) div.className becomes 3 columns and below it’s one column.
A sidenote: keeping up with different device widths and pixel densities isn’t sustainable. I’ve found it’s fine to set one or two breakpoints where the structure of the page can dramatically change; meanwhile, the content is always responsive within those breakpoints. Everything is responsive, yet simple and device agnostic. More on this idea: Stop Using Device Breakpoints.
It’s trivial to set up multiple breakpoints:
Not only is this simple, it’s also semantic! No need to bloat the html with column classes:
<div class="className col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>. Styling stays in the styling - what a concept!