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 :)
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!
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 👍
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 👍
@@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.
@@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! 🙃
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 👍
The amount of thought and work that went into this would make anybody's mama proud.
more tutorials should be like this one! straight to the point and with many examples! much appreciated.
I didn't expect Tailwind'tm would make this tutorial super easy
Why use and for the items instead of just ?
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 :)
So cool!! Would be awesome to have a basic tutorial with a app layout using these grid utilities.
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!
Loving this videos!!
Amazing, great explanation with very good case examples. Thanks
Thank you - it was fun coming up with these demos! 👍
I learn display:grid from Tailwind classes :D
Love it when Tailwind CSS helps to teach actual CSS 🎉
Amazing work and perfectly explained, thank you!
Thank you! ❤️
simple and straightforward explanation keep up the great work
This was FANTASTIC! Thanks!
beautiful explanatoin in love with tailwind css
Im watching this while in a zoom meeting, and I cant wait to get off so I can try it :)
Magic . . . .Tailwind is going to dominate the frontend!! Keep going with your excellent work!
Best video so far simple, no nonsense 🤲
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
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 👍
amazing quality and explanation, thanks
Thank you! 👍
The end was kind of abrupt but what an awesome piece of educational css grid!
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 👍
Omg that's waaaaay easier and faster than css
Thank you tailwind ❤️
Amazing video, thank you!! Very easy to understand :)
I hope a "tailwind way" of doing grid template areas is in the pipeline :)
not the exact same, but there is a plugin for grid template areas on GitHub
this is brilliant!
Absolutely Excellent....... Just Wow And Tnq Very Much
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.
That's the plan in the long run 😅
Is it possible to have overlapping containers using CSS grid in Tailwind?
Do you mean "grid" containers, or "cell" containers should overlap? I think both are possible 👍
@@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.
Completely off topic, but, what's the setup for this recording? It's so well aligned to the center! 😆
Used an app called "divvy" to set up window dimensions. Works both on Mac and PC 👍
@@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! 🙃
@@TailwindLabs Outstanding work 👏
@@januariopinto_ Thank you so much! ❤️
is it possible to use grid areas with tailwind?
Thanks for this nice tutorial.
Tailwind CSS must be named Tailwind I'm Thrilled!! :)
Can we please have a video setting up Tailwind CSS with Gatsby?
What editor and plugins was used here?
What is your VSCode theme??
Amazing! is this even possible using bootstrap?
This is amazing. Why I learn about this framework only now?!
thank you great teacher
and the presenter is excellent!
Aww, thanks!
What font is it that you’re using in the editor?
dankmono
Also offtopic, but wonder what theme and font do you use on your editor, looks nice!
font-dankmono
Great video
tailwind was so cool
thank you so
Now this is some nice real shit!!!
Basically, this:
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
How to make a loop of these while using Vue or Laravel?
You would implement a loop in your respective language
@@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
@@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.
So nice, can you also share your vscode settings like font, theme and etc please, thanks
dankmono
great
i miss u Simon :(
liked and subscribed bro...
meanwhile boostrap in 2050: We introduce Css grid.
To be honest, i find it easier to work with grid when using straight CSS.
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 👍
If you ever feel lonely, remember about the only guy who hit unlike in this awesome video (atm)
omg what
T H A N K S