DEV Community

Discussion on: Ridiculously easy row and column layouts with Flexbox

Collapse
 
mindplay profile image
Rasmus Schultz • Edited

That's what I'd like to know. 🤔

I've seen one CSS library that uses the approach with just row, column and "double column", "half column" etc. classes. - it doesn't work and I'm not convinced it's possible without resorting to selectors like e.g. row.margin-20 > column with potentially specificity problems, and... suddenly things don't look that simple.

Of course, one option is to use another element to establish margins, e.g.:

<div class="row">
  <div class="column">
    <div class="margin-20">...</div>
  </div>
  <div class="column">
    <div class="margin-20">...</div>
  </div>
</div>

The problem with that of course is less elegant markup with extra elements, plus you have to carefully manage your column-margin elements and make sure they're all still the same width if you make changes, so... Not really a good approach either.

EDIT: these days, I'm taking an approach with more utility-classes, and by now I disagree with my last statement here. By now, I find that row and column being solely responsible for dividing into rows and columns, actually makes sense - I don't actually want any built-in padding or margins in grids, because this makes it harder to, say, fill a cell with a background, or use more/less whitespace in a particular cell, etc... So by now, I actually prefer the approach where another element is nested to add padding or background.