Grid Layouts (the easy way) // Tailwind CSS

[@keifer7813]

Great video and explanation!

[@saravanakumar-od8ct]

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

[@Lazaerus]

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

[@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!

[@allenrobinhubert4038]

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

[@Abishek-b5y]

Thanks!

[@basarat]

Wow. Thanks 🤩

[@jakemoss8700]

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

[@davidwesh4123]

Simple and precise, thanks💪

[@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.

[@erice.3892]

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

[@developerakhter______0076]

*Mr. Straight Forward. ❤️*

[@basarat]

Thanks! Love it 😊

[@atg_tube1572]

i loved this tautorial thanks bro!

[@soundsofnation5773]

Awesome! Nice explaination

[@crommit8222]

Very clear and understandable explanation. Great video!

[@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).

[@seebsk6215]

thanks. it was easy to learn

[@knitest1ck]

Awesome man this is great, subscribed

[@basarat]

Awesome, thank you!

[@gwemula]

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

[@basarat]

Thanks! Exactly the uplifting comment I needed

[@Bupyeong_31]

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

[@mahdigh-rj4pd]

Thank you bro it was so useful

[@edwassermann8368]

Amazing and short explanation. Thanks!

[@bsewall]

Super clear explanation. Thanks for the video!

[@basarat]

Thanks 🌹

[@devsilvamarcus]

Thank you men!

[@thamaraikannan943]

The best of best ❤🎉...

[@basarat]

Thank you 🌹

[@fakhreddinefarik-lw1ey]

Thx bro for this beautifull lesson

[@basarat]

Thanks 😊

[@nsolomonsudhirprabhakar7317]

I like the way you explained with animation

[@basarat]

Thanks! Editing these tutorials takes a lot of time 😂

[@SpaceDino6928]

Awesome, thank you!

[@tanishqbaweja9194]

very beautifully explained!

[@ed5616]

is sm rules not for the small screen ?

[@nanotichorizon9644]

Great breakdown!

[@basarat]

Thanks!

[@johanesalberto6136]

thank you so much brother

[@codetoday5224]

it is very helpful sir

[@funwith960fps9]

Great explanation❤

[@elcodigo4421]

Gracias...estaba buscando un video como este.

[@basarat]

Glad it was useful Thanks for leaving a comment

[@maysamtayyeb4552]

Just fantastic!

[@basarat]

Thanks Maysam 😊

[@UsmanKhan-nc2md]

great Sir ....
thank you

[@basarat]

Thank *you* for leaving a positive comment 🤗

[@shasik5324]

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

[@ogs102]

simply simplified

[@soumavabanerjee5925]

Amazing content man, keep rolling out more !

[@basarat]

Thanks
Positive feedback like this is what makes it worthwhile

[@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

[@harryakbaram]

Thanks for the video!

[@amirbahador.developer]

ty sir 🙏🏻🌹❤️👍

[@basarat]

You used my favourite emojis 😊

[@Electro_69]

But how to do it in map method

[@sunilshah300]

Thank you sir

[@whoisarjen6368]

Very usefull, thanks for posting!

[@basarat]

Thank _you_ for leaving a comment 🤗

[@itsgoubie]

Very objective, thank you

[@basarat]

Cheers 🍻

[@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) 🤞🏻

[@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

[@dollnguyenstudio9528]

thank you

[@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.

[@worldrealprincess]

tnx bro

[@basarat]

Thank you 🫰🏻

[@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';

[@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

[@UmutYerebakmaz]

grid grid-cols-1 🙏

[@basarat]

Cheers 🥂

[@motivationislami1]

thank you but grid template rows wern't discussed