Grid support

[kylemilloy]

Support for display: grid; and its props would be swell.

[reinink]

We had originally planned to ship grid utilities, but it turns out browser support is still not there. In fact, grid in IE10/11 is a dumpster fire. At this point we only want to add utilities to Tailwind that can be safety used. Here is a comment from an earlier PR:

Hmm, tricky. I think our current approach makes a lot of sense. I see a ton of value in Tailwind only offering utilities that are practical to use given today's browser support. This is the exact same reason we're not including grid classes in the core right now. I could see things like grid being added as optional extensions (which is actually the plan), but not included in core until they have a sufficient amount of browser support.

One thing you can obviously do is create your own utilities if you want to use these. Check out this doc page for more info: https://tailwindcss.com/docs/adding-new-utilities

That said, we are planning to add an optional extension to Tailwind for grid for those living on the bleeding edge. Then, long term, that will likely be merged in and become part of Tailwind core.

I'd recommend simply using flex to build your grids at this point. It's wonderfully easy with the sizing helpers. For example, to create a three column grid with a gutter, you could do this:

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

[kylemilloy]

I think you mean <div class="flex flex-wrap -mx-4"> ;)

Cool...wouldn't mind contributing to a fork to figure that out.

[reinink]

Frig, yes, I'll update that. Been a long couple of days.

[jackmcdade]

Yeah but who uses IE10/11? :)

[reinink]

@jackmcdade TOO MANY PEOPLE 😭

[jackmcdade]

I must be delightfully isolated then, I haven't supported IE in years with Statamic and have had exactly zero complaints. Interesting!

[reinink]

Really eh? According to this website, IE usage is still at 6.72%. Depressing.

[jackmcdade]

In my experience that's generally low enough on a product where you can say "We support the latest cross-platform browsers" and be fine. Those 6% are often not people who would ever be in the market for some of things we build.

[reinink]

Yeah I really think it comes down to who your target audience is.

[jackmcdade]

Yep. And my target audience would enjoy some grid helpers. 😂

But honestly, wrapping that spec might be more work than it's worth. It's all container level stuff, and I think a single class with some rules is probably easier to manage than a string of utility classes with breakpoint modifiers.

[reinink]

Yeah, @adamwathan and I actually already have a pretty solid idea of how we want to implement. As mentioned, we wanted to ship it with alpha, but decided against it last minute (due to browser support). We will have this added soon, I promise Jack! ❤️

[jackmcdade]

It's a perfectly reasonable thing to cut in an alpha. I support you guys. 🍾

[HelgeSverre]

I might just be an idiot, but how would i go about making a simple 3 column layout with margins around each column (gutter in bootstrap), without the last element being pushed to the next line?

[jackmcdade]

Kinda unrelated to display: grid stuff, but check out the docs on Grid.