Consider gutter-specific column sizing

[JiveDig]

This would require a bit more code but would be very powerful IMO. I built my own (not nearly as powerful) flexbox/columns framework Flexington. The main reason I did so was to allow 2 levels of HTML and have flexbox columns with adjustable gutters.

All the other frameworks can do this (Tailwind/Bootstrap/Foundation/Bulma/etc) but only if there is an extra HTML wrap.

A rough example of the solution I found was to do this (attempting to use Tailwind classes so it's easier to understand for the followers here:

<div class="flex flex-wrap -ml-2">
	<div class="w-1/3 ml-2">Item</div>
	<div class="w-1/3 ml-2">Item</div>
	<div class="w-1/3 ml-2">Item</div>
</div>

.flex.-ml-2 > .w-1\/3 {
     // The normal column width minus the parent negative margin
     width: calc( 33.33333% - .5rem );
}

So, the default -ml-2 class has negative margin of -.5 rem and the default w-1/3 class has width of 33.33333%. When w-1/3 is nested in a wrap with -ml-2 it subtracts that spacing.

Hopefully this makes sense.

The original Flexington version does it with gutter-* classes like this:

.gutter-30 > .col-xs-4 {
    -ms-flex-preferred-size: calc( 33.33333333% - 30px );
    -webkit-flex-basis: calc( 33.33333333% - 30px );
    flex-basis: calc( 33.33333333% - 30px );
    max-width: calc( 33.33333333% - 30px );
}

Would love to hear thoughts on this approach and potential for something related in Tailwind. It's honestly the only thing holding me back from making a full switch.

[adamwathan]

My gut reaction is to recommend using CSS Grid instead of Flexbox (if you can live without IE11) support, because this is so much cleaner/easier there.

Here's an example of a Tailwind plugin that adds support for it:

https://github.com/tailwindcss/plugin-examples#css-grid-utilities

If you do have to use Flexbox, I would personally rather use the extra element than bake highly specific CSS selectors like .flex.-ml-2 > .w-1\/3 directly into Tailwind, as that would introduce a nasty precedent of different utility modules interacting with each other.

Another option is to write your own grid component classes that work as you've outlined, so you would just use classes like gutter-30 and col-xs-4 in your markup instead of the utilities.

[JiveDig]

Yes, Grid is perfect for this and as much as I don't hang with old browsers we're stuck supporting IE11 for a while longer unforunately. And grid-gap doesn't work in in IE11, which is the whole point of using Grid for this application.

[adamwathan]

Yeah totally understand. So I can say with confidence we definitely won't add anything like .flex.-ml-2 > .w-1\/3 to the framework because even though it's helpful in this particular case, it would be really unpredictable for someone who wasn't using those classes to build a grid this way. If you add w-1/3 to an element, you expect it to be 1/3 width, so when it does something different that's not great IMO.

So I would recommend living with the extra wrapper, or extending Tailwind with your own grid component classes.

I would probably do that as a plugin since that would let you do a lot of the math programmatically instead of hard-coding it:

https://tailwindcss.com/docs/plugins#adding-components

[JiveDig]

Thanks for the quick reply/discussion Adam. Tailwind seems to be the type of framework/library I've been looking for so I'll probably migrate to it as things progress for me (and my WP themes/plugins).

[benface]

Just curious: why not use padding instead of margin for the flex items?

e.g.

<div class="flex flex-wrap -mx-2">
    <div class="w-1/3 px-2">Item</div>
    <div class="w-1/3 px-2">Item</div>
    <div class="w-1/3 px-2">Item</div>
</div>

No special CSS needed.

[JiveDig]

I need padding/background-color/border/etc on the element/column itself. No way to do that and have a gutter without an extra div wrap.

[benface]

Right OK, I didn't realize you wanted to avoid an extra div. Sorry, should've read more carefully.

I can't wait for the negative margin hack to be obsolete. For me, it's one of the most annoying things in web design today. Thankfully the gap properties from CSS Grid are coming to Flexbox, but it will be a few years before we can use them with no fallback. Firefox Nightly has them now (version 63.0a1).