Grid Layouts (the easy way) // Tailwind CSS

[@keifer7813]

Great video and explanation!

[@Lazaerus]

Been struggling for days on how to do this. Stellar video, Basarat!

[@saravanakumar-od8ct]

watched many videos for hours i got nothing ..after i find this video just watched 5 minutes all clear ...... thankyou bro !!

[@nishatsayyed8326]

This video was so good. The illustrative animations, the blur effect on code blocks to focus on particular areas, the perfect, on-point and quality tutorial on what and how exactly it works is just awesome.
I struggle with CSS positioning a lot myself and I am sure others do too and noticed that CSS grid layout might just be the answer for positioning anything using CSS.
Would love to see a detailed playlist on just CSS positioning using grid layout.

[@basarat]

This is extremely uplifting 🙏🏻 Thank you

[@ahmadalghali90]

this this this this, thank you so much sir Basarat, subscribed!

[@Abishek-b5y]

Thanks!

[@basarat]

Wow. Thanks 🤩

[@allenrobinhubert4038]

Thank you for the awesome video. I appreciate how you kept it crisp and to the point.

[@theelams7076]

Thanks @basarat - I was scared of grids; but you made it easy! Kudos!

[@RalfTenbrink]

Great video. I only recently had to work with tailwind and this video is helping me very much.

[@davidwesh4123]

Simple and precise, thanks💪

[@crommit8222]

Very clear and understandable explanation. Great video!

[@jakemoss8700]

Great tutorial, honestly the best ive seen on youtube so far covering grid. Will be using this for my bento grid portfolio.

[@javadrip]

Very clear and simple to understand! Thank you! Can you share how to change the order of the "cells"? Like if the screen gets smaller, the orange bar takes up the fill width but at the top, and all the smaller ones at the bottom (taking reference from 4:34).

[@erice.3892]

Thanks bro, this was the real 80/20 in 5 minutes 👍

[@atg_tube1572]

i loved this tautorial thanks bro!

[@soundsofnation5773]

Awesome! Nice explaination

[@gwemula]

Hey man, I wish your channel all the success! Keep churning out great content!

[@basarat]

Thanks! Exactly the uplifting comment I needed

[@edwassermann8368]

Amazing and short explanation. Thanks!

[@knitest1ck]

Awesome man this is great, subscribed

[@basarat]

Awesome, thank you!

[@developerakhter______0076]

*Mr. Straight Forward. ❤️*

[@basarat]

Thanks! Love it 😊

[@bsewall]

Super clear explanation. Thanks for the video!

[@basarat]

Thanks 🌹

[@devsilvamarcus]

Thank you men!

[@tanishqbaweja9194]

very beautifully explained!

[@seebsk6215]

thanks. it was easy to learn

[@SpaceDino6928]

Awesome, thank you!

[@mahdigh-rj4pd]

Thank you bro it was so useful

[@Bupyeong_31]

I thought how to place the image. This video easily explain to me.

[@thamaraikannan943]

The best of best ❤🎉...

[@basarat]

Thank you 🌹

[@soumavabanerjee5925]

Amazing content man, keep rolling out more !

[@basarat]

Thanks
Positive feedback like this is what makes it worthwhile

[@elcodigo4421]

Gracias...estaba buscando un video como este.

[@basarat]

Glad it was useful Thanks for leaving a comment

[@nanotichorizon9644]

Great breakdown!

[@basarat]

Thanks!

[@funwith960fps9]

Great explanation❤

[@nsolomonsudhirprabhakar7317]

I like the way you explained with animation

[@basarat]

Thanks! Editing these tutorials takes a lot of time 😂

[@harryakbaram]

Thanks for the video!

[@johanesalberto6136]

thank you so much brother

[@fakhreddinefarik-lw1ey]

Thx bro for this beautifull lesson

[@basarat]

Thanks 😊

[@maysamtayyeb4552]

Just fantastic!

[@basarat]

Thanks Maysam 😊

[@whoisarjen6368]

Very usefull, thanks for posting!

[@basarat]

Thank _you_ for leaving a comment 🤗

[@ogs102]

simply simplified

[@codetoday5224]

it is very helpful sir

[@mrmozaffari]

Thank you so much. Got a question here, if we have two columns in our grid and somewhere in the code we increase the height of a column, how do we prevent the other column from expanding?

[@basarat]

Give the other columns a specific height (or a max height) 🤞🏻

[@ed5616]

is sm rules not for the small screen ?

[@itsgoubie]

Very objective, thank you

[@basarat]

Cheers 🍻

[@sunilshah300]

Thank you sir

[@dollnguyenstudio9528]

thank you

[@amirbahador.developer]

ty sir 🙏🏻🌹❤️👍

[@basarat]

You used my favourite emojis 😊

[@nicolinux3819]

Great video!, can you say what's the name of the theme what are you using?

[@basarat]

Thanks for the compliment
The theme is the default dark theme in vscode.

[@UsmanKhan-nc2md]

great Sir ....
thank you

[@basarat]

Thank *you* for leaving a positive comment 🤗

[@nat.serrano]

how to create a layout that shows N number of boxes when the screen is big and if you make the window smaller then the N decreases until reaching 1 column when is mobile view?

[@lekkice6988]

you use media queries to set breakpoints

[@hooyah]

Hi basarat and people's. I want to know how to make layout when building dashboard sdmin. Like sidebar in left > navbar top > sidebar right. And the content in the middle of sidebar and bottom of navbar. Thanks

[@basarat]

Noted for future Will build it when I get some time

[@hooyah]

@@basarat
I really appreciate it

[@shasik5324]

How I can do for dynamic data after map()?

[@worldrealprincess]

tnx bro

[@basarat]

Thank you 🫰🏻

[@Electro_69]

But how to do it in map method

[@psyferinc.3573]

thank you

[@basarat]

Cheers

[@blackpurple9163]

Doing this isn't that difficult, but making it responsive is the real problem for me

[@cryptodev2615]

I do this to my parent container of my whole app to build layouts.

[@basarat]

Neat trick

[@qbek_san]

now do this, lmao
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';

[@UmutYerebakmaz]

grid grid-cols-1 🙏

[@basarat]

Cheers 🥂

[@motivationislami1]

thank you but grid template rows wern't discussed