Complete CSS Grid Tutorial using Tailwind CSS

This video is a complete guide to all the available CSS Grid utility classes in Tailwind CSS. I will NOT just be using some colored boxes to explain the concepts, instead we will learn how to implement real world layouts and also customize Tailwind CSS to help achieve some of them.
If you already know the basics of CSS grid, that's great. But even if you don't know much, this video will help you understand the concepts better.
Codepen Links in the Video:
codepen.io/darkosxrc/embed/Qq...
codepen.io/sheelah/embed/abNq...
codepen.io/brianhaferkamp/ful...
codepen.io/tylersticka/full/w...
Tailwind CSS Play Links of Example Demos:
play.tailwindcss.com/PH5DMa5Tk4
play.tailwindcss.com/Uj02HyTxGi
play.tailwindcss.com/WLblCqSJuV
play.tailwindcss.com/ozu1LnODrm
play.tailwindcss.com/Q5wSHkKslm
play.tailwindcss.com/79pBTDyyyJ
Subscribe and stay tuned for tips, tutorials and more.
Follow me on Twitter: / shrutibalasa
Follow Thirus on Twitter: / thirusofficial
Visit my website: www.shrutibalasa.com

[@shrikantjha5630]

One of the coolest Tailwind CSS Grid Tutorials on YT.

[@jbraddockm]

Your tutorials are quite easily one of the best I’ve ever had the pleasure of watching. Thank you very much.

[@Thirus]

So happy to here that! You’re welcome 😊

[@khalidhisham5802]

This is by far one of the simplest best tutorials I've ever seen, keep up the good work

[@Thirus]

Thank you 🙏 😊

[@blackpurple9163]

This helps a lot to understand grid in both Tailwind and CSS as well, great video

[@Thirus]

Thank you 😊

[@kieran2347]

Awesome! Just started watching, Shruti! Thanks for all you do! Honestly, missed the videos for a while! Glad to see you are back in action!

[@Thirus]

Super occupied with other things, but always love to create videos simplifying difficult concepts

[@kieran2347]

@@Thirus Have a wonderful day and please take care and stay safe! Good day

[@marcotorres899]

Amazing video and very friendly explanations. Thank you very much for taking the time to create this video!!! Helped me a lot!

[@Thirus]

Very happy to know that 😊

[@webdevluc]

Excellent tutorial Shruti. A lot of effort went into making it so good. It made me understand more about pure CSS Grid and the Tailwind implementation. Great work

[@Thirus]

Thanks Lucian! 😊

[@ibrahimolayiwola3605]

Great video, all concepts well explained. You made it so easy for me. Thank you so much for the video.

[@Thirus]

You’re welcome :)

[@pedrokkaz]

Great tutorial! You're great at teaching, keep it up!

[@Thirus]

Thank you very much!

[@hiajayy]

Well explained. Thank you.

[@kmaphane]

Great tutorial. All the gems are packed in here.

[@Thirus]

Thank you so much :)

[@lonankeane4241]

You're a great teacher, very thorough. Thank you

[@Thirus]

So glad to hear that :) You’re welcome!

[@jasonbrooks737]

thank you. this is exactly what I am looking for. I read your book too and it was a great learning by problem resource.

[@Thirus]

Yay! Happy to hear that :)

[@CavanMitchell]

great work, better explanation than most other videos

[@Thirus]

Thank you 😊

[@codenameunknown3791]

Great and very useful demo and tutorial. Thanks!

[@Thirus]

You’re welcome 😊

[@jerome_ee6522]

Nice refresher. Thank you! Very helpful for my django app!

[@Thirus]

Happy to hear that! 😊

[@awaisiqbalqadri1086]

one of best explained Grid tutorial. Must watch

[@Thirus]

Thank you!

[@tryhuckd9331]

I love your tutorials!

[@Thirus]

Happy to hear that :)

[@akterh0sain]

awesome this was a great afford for us . i saving your flex and grid both . for future . if i get problem in doing project

[@ohiwantyoutobelieve]

I watched it from the beginning to the end, thank you

[@Thirus]

You’re welcome :)

[@lfc5times130]

If you know bootstrap, tailwind css is very similar. Great tutorial for beginners and a refresher tut for exp. professionals. Clear explanation of grid. Thank you. Subscribed.

[@Thirus]

Thank you!

[@101stDay]

This was fantastic!

[@Thirus]

Thank you!

[@erfanrj2780]

it was a really great video . thank you . I learned a lot

[@Thirus]

You’re welcome :)

[@sunilpatel321]

Excellent video, one of the best tutorial.

[@Thirus]

Thank you!

[@hi-yi7en]

Underrated youtuber

[@MichaelBrown-vq4fd]

Well done, much appreciated.

[@Thirus]

Thank you! :)

[@brijeshprasaddas249]

This is saving lives...great video

[@Thirus]

Ha ha thanks!

[@pranaydas7382]

daam so good perfect explanation!!

[@Thirus]

Thank you Pranay :)

[@silenthill8312]

Thank you every much
I appreciate everything you do
♥

[@Thirus]

Thank you 😊

[@IslamZazoe]

thanks for all tuts. and your book is amazing

[@Thirus]

Thank you very much!

[@danielChibuogwu]

Thank you for this tutorial, it was really helpful 🙌🏾🚀🚀🚀

[@Thirus]

Very happy to know that :)

[@pedadaaswini9095]

such a beautiful video....keep going on

[@Thirus]

Thank you!

[@ShAnFiNiTy]

I appreciate this video now I can have a clear mind about grid in tailwind-css because I was confused if BOOTSTRAP and tailwind had the same grid.

[@Thirus]

I’m happy it helped :) Meanwhile, do check out my eBook on this topic - shrutibalasa.gumroad.com/l/css-flex-and-grid
It has a Tailwind CSS version too

[@CoderboyPB]

Nice tutorial. Thank you 🙂

[@Thirus]

You’re welcome!

[@shamvoke]

Wow. Thanks for this. deserves a sub

[@Thirus]

Thank you!

[@rejathchandran3289]

Awesome 👍 much appreciated ☺️

[@Thirus]

Thank you!

[@fabianrossini4315]

Oh Shruti, thank you for your work, you make the difficult simple, and this is what good teachers do. I send you an affectionate digital kiss from Argentina

[@Thirus]

Ha ha thank you!

[@HolmesPatrick]

Good work , keep it up

[@Thirus]

Thank you! 😊

[@rasikaraja1840]

Akka Enni tutorials Choosina rani clarity icchav.
You gave clarity that any other tutorial could able to.
The thing you mentioned "just try item-center or content center and change accordingly" is just magic. I wish someone could have told me this I wasted a lot of time here.

[@Thirus]

Chaala Santhosham. Glad to hear that 😊

[@sachinpandey7751]

best tutorial in youtube ........thankyou

[@Thirus]

Thank you!!

[@sujityadav8707]

Excellent explanation 👌👏

[@Thirus]

Thank you..

[@JavascriptForEverything]

thanks, I also need to understand the grid in css again.

[@Thirus]

You can try my ebook for that - shrutibalasa.gumroad.com/l/css-flex-and-grid

[@VietTranIT]

Thanks for the tutorial

[@Thirus]

You’re welcome :)

[@alianwar219]

Very informative.

[@Thirus]

Thank you!

[@khaizukooninaru9155]

Wow very nice I got lot of new information thank you

[@Thirus]

You’re welcome!

[@adisakjantrasopark7672]

Excellent tutorial Shruti.

[@Thirus]

Thank you!

[@mircoveltri3259]

You are doing great videos. If you do not mind: on minute 31:19 (before moving to the next example" you should add md:col-span-2 to the bottom div "Additional Information" like you did on the first one "Introduction" otherwise it does not work. This is one of the layouts I used several time so far that's why has been easy to figure out the missing piece. I would also add a gap-4 to the nested grid. my 10 cents

[@albertosetim6526]

Thank you, please keep teaching :)

[@Thirus]

Sure :) I love to

[@bearsstuff]

Thank you!

[@Thirus]

You’re welcome!

[@kivoshfamily]

Great great😀

[@soultouchingsongs]

Amazing 👍

[@Thirus]

Thank you!

[@HellBoy-ed4ct]

Really helpful. 👍

[@Thirus]

I’m glad 🙂

[@swesadiqul]

awesome dear

[@oliverahmed7630]

Awesome..

[@shahhussain56]

It's amazing maam. I can say that this is the best Grid tutorial for not only tailwind but for pure grid also. I enjoyed and learn complex concept with very easy thanks a lot ma'am 😊. You got a new subscriber 👍🏻

[@Thirus]

So happy to know that :)

[@vishutiwari99]

Please keep posting the videos about tailwindcss. Don't leave it in between. Actually I didn't find any complete tutorial of tailwindcss.

[@Thirus]

I’m coming up with a full course soon, may be in a month

[@hamatoYogi]

Superb video 👌🏽

[@Thirus]

Thank you 😊

[@hi-yi7en]

🙏.. your explanation is excellent mam...

[@Thirus]

Thank you!

[@KT-User]

superb mam...thanks

[@Thirus]

You’re welcome

[@creedddzz]

You are the best

[@Thirus]

Thank you!

[@uppalapatisrinivas110]

Thank you so much....

[@Thirus]

You’re welcome :)

[@shaikikbhalBasha]

Thanks

[@silentcoder6685]

thanks mam for this wonderful content
❤❤❤❤❤❤

[@Thirus]

You’re welcome!

[@Bravin_Joshua]

Thanks a lot

[@Thirus]

You’re welcome!

[@junglestar]

TY

[@arhamshahversatile]

Instead of putting all variant classes at the end, I put them next to the original class and I find this better
Instead of
my-3 flex-col bg-green-200 sm:my-6 sm:flex-row
I do
my-3 sm:my-6 flex-col sm:flex-row bg-green-200

[@Thirus]

I used to do the same until Adam Wathan tweeted about best practices. Here is the link to that tweet: twitter.com/adamwathan/status/1399473275709923332?s=21

[@samsHandle]

Thanks Shruti, this is really helpful 🙂 One detail which would make this even better would be to add timestamps

[@Thirus]

Yes, planning to add them. Thanks for the feedback :)

[@rajeshmadhavanblackpanhthe553]

hello how to add image slider and animations in tailwind?

[@yudisetiawan2119]

thks a lot

[@Thirus]

You’re welcome

[@mohamedyoussef8835]

Awesome video ++++++++++++++++ 😃

[@Thirus]

Thank you! :)

[@rangabharath4253]

awesome

[@Thirus]

Thank you!

[@rahmatullah4657]

how can I add some text with a hover effect in the middle of the image using Tailwind CSS??

[@Thirus]

I didn’t get you. You want to display text on image hover? And you want that positioned at the centre of the image is it?

[@necatbolpaca7882]

col-span and row-span concepts are very similar to cells spanning.

[@Thirus]

Yes, that’s right. This is why its easier to understand Tailwind

[@taoufikcomputerscience5222]

good cours

[@Thirus]

Thank you..

[@stranger-kd8uo]

❤❤❤

[@gdogmalone]

Thanks for another great video!
Is it possible to push content to the bottom/top/centre of individual cells, rather than the whole grid? So stretch the whole grid, but force one bottom of one cell for instance? Thanks

[@Thirus]

Yes, you can use the self-* or the justify-self-* utility classes for that item. Check the documentation.

[@gdogmalone]

@@Thirus Thanks so much! It's funny, I read the docs and couldn't find it or perhaps dismissed it as a flex box thing. Second time in the last week you've helped massively, thanks!

[@Thirus]

I’m so happy to hear that :)

[@abhishekjadhav3867]

Please can you make video on vue2 grid

[@tanzimibthesam5861]

Nice though I don't or rarely use it any plans on Bootstrap 5

[@drjada1475]

This should get more reach!

[@Thirus]

Thank you!

[@oomusou]

finally

[@Thirus]

Yes!

[@Rm_rm_bjp]

Hai please continue tailwind CSS classes and please cover all parts in tailwindcss

[@Thirus]

Yes, coming up with a full course in a month

[@sabihasultana7596]

Hi sister, ninna mi video chusa chala chala help iendi Naku thank you so much but nenu chestunte grid auto fit chestunte avvatam ledu nenu first sm nunchi start chesa grid-col-1 ani echa and grid auto fit apply cheste responsiveness lo kuda adi grid-col-1 ani untundi lg screen lo kuda grid col-1teseste content anedi rows lo columns lo unnai em cheyyali
Reply me

[@Thirus]

Please send me a DM on Twitter - twitter.com/shrutibalasa with code screenshots

[@sabihasultana7596]

Ok I send the screenshots sis

[@oomusou]

Can you make course about Tailwind animation ? thanks

[@Thirus]

There aren’t many utility classes available for this. The official documentation seems to be good for this

[@asfnobambu]

A side effect will be that in the future nobody will learn plain CSS but will start from the beginning using some framework. Good of bad ? And how about SASS ? Will be rendered obsolete ?! Anyhow, great class here :-)

[@Thirus]

A lot of people don’t prefer tailwind css. I would actually recommend learning css first and practice a little before jumping on to a framework.

[@asfnobambu]

@@Thirus Sure! After some Bootstrap now trying Tailwind. But I'm not zero at CSS tough. Keep the good work...

[@rutikwankhade337]

how can we add a certain margin to every odd row and create a pattern like this while mapping a list
😮 😮 😮 😮
😮. 😮.😮
😮 😮 😮 😮

[@Thirus]

This isn’t possible with Grid. Grid is suitable for a table like structure. You can use flex instead.

[@mohamedharoun6372]

what is the tshshshshsh sound?

[@Thirus]

It’s called “focus on the video!” 😀

[@mohamedharoun6372]

@@Thirus BTW thanks for the great effort.