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

[selrond]

Anyhow, this should be up to the dev using Tailwind, not Tailwind itself.

Being it a utility-first CSS framework for rapid UI development, CSS Grid support is a must.

[filljoyner]

@pxwee5 While I can appreciate your frustration as I too do not like dealing with IE, know my comment is informed from years of stats and experience in supporting these customers.

A principled stand is great and I'm not trying to steer this project in any direction. I just wanted to present another perspective where very large organizations aren't as nimble as leaner outfits and require a lot of time to securely adopt new tech.

I reached out to Adam about legacy grid system support (floats for days!) a few months back to get his thoughts. At the time he was working on the ability to extend Tailwind and suggested checking that out when it was released as I could bolt it on as an extension. I got busy and have yet had a chance to pursue.

It is great to know that Tailwinds has a system to extend though.

[marbuser]

@filljoyner

This is no reason to not add it. Tailwind is a utility framework. It should be there as an option, so that people who DO want to use it CAN, and those that DON'T, don't have to...

Also, let's be honest, the only reason IE is even still remotely used is because for whatever reason, the trend emerged that web developers should be supporting every single browser, even if it's from 10 years ago. All this mindset does is halt progression and keeps people on bad technology.

Hypothetically, let's say every site in the world drops IE support and has a message saying “We don't support IE, upgrade to Chrome/Firefox/etc...”

I guarantee 95% of them would upgrade no questions asked. What does this mean? They are running newer technology. This means they get a better experience using our websites, we get a better experience creating the website since we no-longer have to cater for a deprecated web browser, and overall (almost) everyone wins...

If this doesn't happen, then we are just going to be left attempting to cater for every web-browser under the sun (let's make our site work in netscape and mosaic!!!) instead of spending time doing what we should be doing, building the site and its functionality.

Anyway, regardless of my opinions above, it's still a fact that I'm sure everyone will agree that css-grid needs to be added. Even if it's just and offical (and updated) module/custom utility. So that people who WANT to use it, CAN.

[adamwathan]

This is no reason to not add it.

There were/are many reasons not to add it:

1. There is no IE11 support, and the main project @reinink (who helped create the framework) works on has 9-10% IE11 usage, so if the creator of the framework can't even use the feature, there's not a lot of motivation to invest time into it.
2. For a long time there was no way to disable utility modules in Tailwind, which means shipping a module that most people can't even use (because IE11 usage is still high) was unnecessary bloat that couldn't be removed.
3. Coming up with the right utilities for CSS Grid is very challenging because of how much functionality it has. It seems silly to ship CSS Grid utilities that only cover the use cases Flexbox already handles. Because of this we wanted to build the plugin system first, so a CSS Grid module could be iterated on as a plugin before being included in core.
4. Even though now we can disable modules and we do have the plugin system, nobody gets paid to work on Tailwind so working on features that the maintainers don't even need is hard to make time for.

css-grid needs to be added. Even if it's just and offical (and updated) module/custom utility. So that people who WANT to use it, CAN.

You already can use CSS Grid though! 🤦‍♂️ We have tons of documentation on the site about extending Tailwind either by writing your own CSS or by writing a plugin. There is NOTHING stopping you from using CSS Grid, and me not writing the perfect CSS Grid plugin for you in my spare time for free and updating/maintaining it forever does not count as an obstacle.

DO 👏🏻 IT 👏🏻 YOUR 👏🏻 SELF 👏🏻 THAT'S 👏🏻 WHY 👏🏻 WE 👏🏻 DID 👏🏻 ALL 👏🏻 THE 👏🏻 WORK 👏🏻 TO 👏🏻 MAKE 👏🏻 THE 👏🏻 FRAMEWORK 👏🏻 SO 👏🏻 EASY 👏🏻 TO 👏🏻 EXTEND

We'll ship CSS Grid utilities by default eventually, until then please stop complaining about something that you can already EASILY do yourself, thanks to hundreds of hours of work I've done for you for free to give you all the documentation and functionality you need to extend the framework.

[tehpsalmist]

As someone using tailwind (in every project I possibly can!) and who also uses Grid whenever possible, I completely back up Adam's comments above. CSS Grid is so incredibly powerful and succinct, how do you abstract that away into a few (or even many) classes? The dev who can capture the full power of Grid (like Adam said: and not just reimplement some flexbox capability) in an easy-to-grok list of classnames for quick usage would indeed be an incredible engineer. Not to mention, why do we need Grid? To center content in a div? To create some boring, static 4- or 6-column layout? Absolutely not. Grid gives us the ability to in a few, short, carefully chosen lines of CSS take complete creative control of the entire layout of the page/section. Grid defies frameworks.

Does a Grid plugin sound cool? Sure, we all love playing with new tools. But is it going to enhance our abilities with Grid itself? I sincerely doubt it.

[marbuser]

@adamwathan

I apologise. I did not intend for my comment to come across as aggressive or to sound ungrateful for the work you have done.

Now that you have established other challenges with it, I completely understand. The thing that was frustrating me is just how people were using browser compatibility (for a single browser) as the ONLY argument.

I will start looking into extending tailwind as I've only ever used the base framework.

Again, apologies if my previous comment came across in a way I didn't intend it to.

[bdrtsky]

Yeah but who uses IE10/11? :)

@jackmcdade

20% of Japan 😄

Crazy, right?

[iraklisg]

IMHO it would be very useful to add support for CSSGrid in the form of an official tailwind plugin (for instance, something like the vue and vue-router plugin).

Although tailwind does offer great flexibility to its users by allowing them to add more functionality in the form of plugins, the benefit of an official plugin is that the original values chosen for various grid properties (gap sizes, etc...) would be inline with the opinionated values chosen for tailwinds design system, ensuring a consistency with the tailwind defaults

Finally, as @tehpsalmist notes, it is really challenging to capture the full power of Grid in a list of classnames, however I think that it worth trying to come up with a basic solution that can be then enhanced by contributors

I would be very glad to be of any assistance in case the core team decide to procced with the development of this plugin

@adamwathan and tailwind members/contributors thank you for the work done 👏

[pavelloz]

Yep, there is absolutely no sense in adding classes to handle grid.
Best shot would be plugin/directive, but at the end of the day... grid API is already straight forward, in this case, I can't imagine adding a layer of abstraction on top of it will make things easier.

I just wrote this comment to have an excuse to thank you for your great work.

[lkraav]

For reference, BlueprintCSS by @coryrylan has still found some use for a set of utility classes around CSS Grid Layout https://blueprintcss.dev/docs/grid

https://blueprintcss.dev/docs/why-grids-and-utilities 👀

[tlgreg]

At that level with utilities, it is really a wrapping flexbox, but because of grid-gap it does have its appeal. Unfortunately, wide support for gap is still a long way down the road.

[adamwathan]

Implemented in v1.2.0.

[subhero24]

Is align/justify-items/content supported for grids? I can only seem to find these properties in the documentation regarding to flex, but not grid.

[DanielRuf]

These are flexbox relevant things, not CSS grid which is only for layout. Not for positioning contents and elements in general. CSS grid does not replace flexbox.

[subhero24]

I understand CSS grid does not replace flexbox. But these properties are not only flexbox related. They also influence the CSS grid position in its container, and box placement inside a CSS grid cell.

[adamwathan]

The ones we include definitely work for both Flexbox and grid, all they do is set the properties 👍

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-auto {
  align-self: auto;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-stretch {
  align-self: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.content-center {
  align-content: center;
}

.content-start {
  align-content: flex-start;
}

.content-end {
  align-content: flex-end;
}

.content-between {
  align-content: space-between;
}

.content-around {
  align-content: space-around;
}

We are missing some though (justify-items, justify-self) and our *-start variations use flex-start not just start, so the behavior might be slightly different than you want in some cases.

[subhero24]

Yes, it was the justify-items that I was missing.
Maybe the flex- prefix could be fixed if the generated css looked like

.flex.items-start {
  align-items: flex-start;
}

.grid.items-start {
  align-items: start;
}

Would you consider adding this? If so, I will be happy to create a pull request for this

[subhero24]

After giving this some more thought, I think the best solution are class utilities like:

{content|items|self}-{x|y}-{start|center|stretch|...}

I have created a plugin for this tailwindcss-grid-placement

This does avoid the problem of flex-start vs start and provides complete control over the grid and its' items.

@adamwathan If you would like a PR for this, just let me know

[fabrikatdigital]

Thanks @subhero24! These are definitely necessary for full grid control.

[AKSHAYCHIDRE]

After giving this some more thought, I think the best solution are class utilities like:

{content|items|self}-{x|y}-{start|center|stretch|...}

I have created a plugin for this tailwindcss-grid-placement

This does avoid the problem of flex-start vs start and provides complete control over the grid and its' items.

@adamwathan If you would like a PR for this, just let me know

Thanks 👍