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.

[HelgeSverre]

oh, with negative margins I see. thanks. Didn't mean to derail the issue, my apologies.

[reinink]

The issue with using flex for grids (which let's be honest is hardly an issue, flex is amazing 😍), is that the margins are don't count as part of the columns. Meaning, you'll get 1/3 + 1/3 + 1/3 plus your margins, which is over 100%. This is causing the wrapping you're seeing.

As you've just noted, you just need to use negative margins and padding:

<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>

[jackmcdade]

Or you can nest your column stuff inside a wrapper with padding. Pick your poison.

[reinink]

Yep, totally, good point.

[HelgeSverre]

<div class="container mx-auto mt-4 p-4 bg-grey-light ">
    <div class="flex flex-wrap font-mono  -mx-2">
        <div class="w-full md:w-1/3 sm:w-1/2 px-2">
            <div class="bg-blue" style="height: 100px;">
                I am a blue box inside of here
            </div>
        </div>

        <div class="w-full md:w-1/3 sm:w-1/2 px-2">
            <div class="bg-blue" style="height: 100px;">
                I am a blue box inside of here
            </div>
        </div>

        <div class="w-full md:w-1/3 sm:w-1/2 px-2">
            <div class="bg-blue" style="height: 100px;">
                I am a blue box inside of here
            </div>
        </div>
    </div>
</div>

Produced the result i was expecting.

[scottzirkel]

It'd be hard to do named rows/columns, but I guess you wouldn't need to if it's all inline?

[bbashy]

Yet another thing held back by worrying about IE :(

Stats from 2 million (out of 1 billion total) websites based on page views is not something to go by.

[m1guelpf]

Is there any way to use a prefix for outdated browsers, like we do for screen sizes?

[reinink]

@m1guelpf Auto-prefixer does prefix for grid in outdated browsers, but unfortunately IE is still a mess. It's using an old version of the grid spec, and has tons of features missing. To the point that it's no more useful than just using Flexbox, which has fantastic browser support.

[reinink]

@bbashy We plan to add grid before a 1.0 release. We left it out of alpha for two reasons:

1. The browser support problem. It's real. Maybe not for everyone's target audience. But for enough that we felt it was unwise to include. Here are recent stats from a SaaS app of mine:

2. We simply ran out of time. We didn't want to hold back the alpha release for it.

So, please hold tight, it's coming.

[bbashy]

If people see things don't work in IE, they try another browser. It's simple. IE is not on mobiles, so no need to worry about that.

People won't change unless they're forced to. Stop supporting old browsers and that number will go down and others up.

[scottzirkel]

People can't always try another browser. I've had some government clients who cannot install any other browser on their computers, so they are forced to use IE.

With Edge having full Grid support and it now being considered an evergreen browser, this should be much easier to deal with moving forward. However the reality is that not everyone has a choice to simply switch browsers.

[bbashy]

Not sure why you'd be using this on a Gov site/software but that's true.

[scottzirkel]

Doesn't have to be a Gov site, just one that would be accessible from their computer. Same goes with some private sector enterprise type companies as well. We do work for a local utility company and they are pretty much locked down, though they do have either Chrome or Firefox (can't remember at the moment) installed by default.

[reinink]

Okay folks, let's not turn this into a big browser compatibility discussion. There are obviously going to be varying opinions on this complex problem.

Point is, we're going to add grid at some point in the nearer future and leave this decision your hands. 🤘

[mattstauffer]

I build sites for governments, big enterprise, big non profit, schools, and colleges, all of whom are stuck with old IE. It’s not their fault and not under their control. IE 11 support is vital.

[mattstauffer]

Oops I slipped in late. Sorry Jonathan. 😘

[reinink]

All good brother! ❤️

[alanonthegit]

So excited for grid support and 0.2.0! @reinink I know it's not something devs enjoy being asked, but as I am planning to bring Tailwind to our team and our new stack, is there a roadmap or rough timeline for the 1.0 release? No pressure though! We'll definitely get going with the alpha :)

[alanonthegit]

Also, just a consideration since we're still dealing with IE - I wonder if / where it makes sense with some overlap (I understand grid is NOT a replacement for flexbox),that by using grid utility classes, we also get feature queries that fallback to flex.

For example - https://codepen.io/primalivet/pen/ryjKmV

maybe it could be like -

.grid-class {
   @supports (display: grid) {
   `grid code`
   }
   `@apply flex classes`
}

With a giant caveat that it would only work for limited use-cases. If there is a mapping that is sensible for some base classes, that would still remove some work from doing fallback logic 100% manually.

[DanielRuf]

You should still be able to use ms-grid, grid and flex combined with @supports.

[eduarguz]

taking the flex method for making grids... is there a way to make all divs in that list match the size of the first one? or the taller one ? https://jsfiddle.net/4yw6ocv2/

[jackmcdade]

Usually by just adding .flex-1 to each child.

[DanielRuf]

Do you mean the heights? Better open a new issue.

[adamwathan]

@eduarguzher That's actually impossible with Flexbox unfortunately:

https://stackoverflow.com/questions/36004926/equal-height-rows-in-a-flex-container

...but can be done with CSS Grid apparently.

[eduarguz]

thank you for your answers guys, I think it is not a big problem for the case I have... was an interesting question/answer anyways

[pxwee5]

@reinink Can you elaborate how you would implement grid support?

I mean with the ability to use repeat and grid-template and etc, it would be a challenge to (fully) implement grid as a utility class.

[alanonthegit]

what might be interesting (though not purely class driven) is to leverage CSS custom properties at the local scope level to pass in attributes that a class is expecting.

https://css-tricks.com/css-attr-function-got-nothin-custom-properties/

It could potentially let us pass in values from the markup to the CSS classes that expect a repeat value, etc.

[DanielRuf]

Vars can just be defined in the root and are not supported by all browsers.

[alanonthegit]

@DanielRuf yes, vars can be defined in the root, but if you want context-specific vars to pass configurations to your classes, you can override these root values per component.

As for them not being supported in all browsers, if you're using CSS Grids in the first place, this point is moot since CSS variables have the same browser support as the modern Grid implementation.

[DanielRuf]

What about ms-grid? You still need a fallback for vars.

[alanonthegit]

I did say modern grid implementation, since pxwee commented on repeat and grid-template

[DanielRuf]

Well, this would clearly drop IE11 support if no @supports and other declarations are used.

Foundation Sites has the same discussion about the next grid.

[DanielRuf]

This brings us back to the first reply in this thread.

[alanonthegit]

Right, I am not getting into the argument of whether to use grids or not. The optional extension for those living on the bleeding edge is still the right call. The burden of the choice is on the developer.

I'm only suggesting a class implementation that might be flexible (pass variables in the markup to the classes, to avoid having to write CSS one-offs classes for anything grid-specific).

we can still reliably use predefined classes and pass in custom values, as opposed to writing inline-styles.

[alesvaupotic]

Just my 2 cents, from a standing point of a back end developer, must-sometimes-be-a-front-end-guy for strictly application development. We do not do web sites.

I find grids very useful and use them everywhere lately. It feels natural, much more than flexbox.

But, I do not miss grid support in Tailwind as I see them like easy to transform<TABLE>. Grids (at least mine), serve a special purpose in an application and not two of them are alike. So, I define and style them locally and just @apply what I need.

Regarding the use of older browsers, I stand on moving on and politely ask my users to upgrade. I do provide an alternative styling for non-grid browsers which does not necessarily replicate the gridded one. Think of it as a stripped-down version of the app. They soon realise the potential in browser upgrade. BTW, it improves web security in general. You upgrade obsolete hardware, you upgrade obsolete OS, so please, just upgrade your browser or be limited. As you are in a case of old hardware or old OS. It's like asking Apple to make APFS working on Lion. Want new functions? Move on!

What I specially like about this product, and the principle behind it, is how is stays out of my way. I @apply heavily to keep my view files clean and generic. Combined with my styling, it is the best of both-worlds, namely using the frameworks and I'll-do-it-from-scratch approach. Kinda like writing your own Bootstrap or Foundation. Or Bulma. Or any popular framework.

Again, this is me and my use cases. I accept that it's different with web sites and wider browser support.

From my point of view, don't make too much of it right now. If grids don't make it into core, fine. If they do, also fine. I'll just PurgeCss and move on. :D