CSS Grid - What's new in Tailwind CSS

Tailwind CSS v1.2 added a comprehensive set of utilities for working with CSS Grid Layout! Let's take a look at how they work.
Play with the code on Tailwind Play:
play.tailwindc...

[@unboxoverkill]

The amount of thought and work that went into this would make anybody's mama proud.

[@LuisReyes-zs4uk]

more tutorials should be like this one! straight to the point and with many examples! much appreciated.

[@sanjayatony]

I learn display:grid from Tailwind classes :D

[@TailwindLabs]

Love it when Tailwind CSS helps to teach actual CSS 🎉

[@aislanarislou]

So cool!! Would be awesome to have a basic tutorial with a app layout using these grid utilities.

[@nicholasyoa86]

I-I'm speechless after watching this (and excited, woah). Me dying over trying to do responsive design and grid layouts -- this is just awesome. I'm gonna have to watch this video again when I resume my project, this is so on-point and focused, while making it exciting (like showing how things can be used like swapping out code, improving it -- its just amazing). Thanks!

[@cyb]

I hope a "tailwind way" of doing grid template areas is in the pipeline :)

[@jacobhilker7722]

not the exact same, but there is a plugin for grid template areas on GitHub

[@Ricker0133]

Amazing, great explanation with very good case examples. Thanks

[@TailwindLabs]

Thank you - it was fun coming up with these demos! 👍

[@JamesQQuick]

Loving this videos!!

[@Mikey-od1xd]

Why use and for the items instead of just ?

[@TailwindLabs]

That's a good question, and not sure I have the answer 😅 I think I had a list of UI cards first, and it made sense in the markup - but when I moved to a more abstract grid, it could very well have been just divs :)

[@rakeshkumarparida98]

I didn't expect Tailwind'tm would make this tutorial super easy

[@nabilabdulrahman9149]

simple and straightforward explanation keep up the great work

[@billaddison82]

Amazing work and perfectly explained, thank you!

[@TailwindLabs]

Thank you! ❤️

[@AbdulWahab-ev2ct]

beautiful explanatoin in love with tailwind css

[@tomasmartty9864]

The end was kind of abrupt but what an awesome piece of educational css grid!

[@TailwindLabs]

Yeah it indeed came to a full hard stop 😅 Thanks for the kind words, I think I got better at smoother endings with the next videos - that was the very first one 👍

[@aniket.kumarr]

This was FANTASTIC! Thanks!

[@Tigregalis]

These videos are awesome. It'd be amazing if you could go back and do a video in this style for each of Tailwind's "old" features.

[@TailwindLabs]

That's the plan in the long run 😅

[@Alefari98]

Hi! Great explanation, i have one question, what tool can a use to see the grid lines on the browser like you do? I think it’s great for development

[@TailwindLabs]

This is the developer tools in Firefox! I had them off-screen for the video, but if you open dev tools in Firefox and inspect a grid element, you'll have options to show grid lines etc 👍

[@khalilm7704]

Im watching this while in a zoom meeting, and I cant wait to get off so I can try it :)

[@thanossmponias2915]

Magic . . . .Tailwind is going to dominate the frontend!! Keep going with your excellent work!

[@driziiD]

this is brilliant!

[@mynameisjeff8559]

Best video so far simple, no nonsense 🤲

[@adnansmove8597]

Absolutely Excellent....... Just Wow And Tnq Very Much

[@SoeaOu]

amazing quality and explanation, thanks

[@TailwindLabs]

Thank you! 👍

[@rezwansaki]

Thanks for this nice tutorial.

[@larisaa2919]

Amazing video, thank you!! Very easy to understand :)

[@januariopinto_]

Completely off topic, but, what's the setup for this recording? It's so well aligned to the center! 😆

[@TailwindLabs]

Used an app called "divvy" to set up window dimensions. Works both on Mac and PC 👍

[@januariopinto_]

@@TailwindLabs thanks! Loving the explaination, 10/10, it's clean, the constant switching between scenes (code / example) is on point, the voice is precise, explains enough but without being neither slow or boring, good content! 🙃

[@FugalFellow]

@@TailwindLabs Outstanding work 👏

[@TailwindLabs]

@@januariopinto_ Thank you so much! ❤️

[@driziiD]

and the presenter is excellent!

[@TailwindLabs]

Aww, thanks!

[@serhioromano]

This is amazing. Why I learn about this framework only now?!

[@gskywalker6147]

tailwind was so cool

[@mahdinaderian4053]

Tailwind CSS must be named Tailwind I'm Thrilled!! :)

[@sreekumarmenon]

is it possible to use grid areas with tailwind?

[@uusa35]

thank you so

[@samuelnmeje]

thank you great teacher

[@BathingAfrican]

i miss u Simon :(

[@muhammadbilalmalik7292]

Now this is some nice real shit!!!

[@SaadKhaan]

Can we please have a video setting up Tailwind CSS with Gatsby?

[@coltonwilliams1565]

Great video

[@edderrd]

Also offtopic, but wonder what theme and font do you use on your editor, looks nice!

[@shourovahmed8230]

font-dankmono

[@Amirkhantv]

Amazing! is this even possible using bootstrap?

[@losource]

Is it possible to have overlapping containers using CSS grid in Tailwind?

[@TailwindLabs]

Do you mean "grid" containers, or "cell" containers should overlap? I think both are possible 👍

[@losource]

​@@TailwindLabs Thanks for the reply! I mean both. A lot of interesting CSS grid layouts use both overlapping cells and overlapping grids. I would love to see how this is done with Tailwind.

[@LuBre]

Basically, this: grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

[@user-id5ct2de8v]

liked and subscribed bro...

[@eduardocerejo3134]

To be honest, i find it easier to work with grid when using straight CSS.

[@TailwindLabs]

Sure thing - CSS grid has a lot of bespoke, custom scenarios where it's probably better to write the CSS directly. We've tried to abstract away a set of useful utilities that help scaffold common layouts 👍

[@muhammadmahbub6462]

great

[@therealice]

What editor and plugins was used here?

[@valijonrahimov6765]

So nice, can you also share your vscode settings like font, theme and etc please, thanks

[@shourovahmed8230]

dankmono

[@diego5g]

What is your VSCode theme??

[@fa8ster]

What font is it that you’re using in the editor?

[@shourovahmed8230]

dankmono

[@Jefferson4026]

meanwhile boostrap in 2050: We introduce Css grid.

[@tanzimibthesam5861]

How to make a loop of these while using Vue or Laravel?

[@biigsmokee]

You would implement a loop in your respective language

[@tanzimibthesam5861]

@@biigsmokee I am talking about like I write post in posts then {{post.title}} if there are several size grids how do I adjust them

[@davidrobertson6371]

@@tanzimibthesam5861 I don’t know if this is the best way, but in Vue I dynamically inject the classes with same loop that’s injecting the content.

[@ernestodiaz4378]

If you ever feel lonely, remember about the only guy who hit unlike in this awesome video (atm)

[@tapiafai]

omg what