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!

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

[@saravanakumar-od8ct]

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

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

[@crommit8222]

Very clear and understandable explanation. Great video!

[@soundsofnation5773]

Awesome! Nice explaination

[@erice.3892]

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

[@atg_tube1572]

i loved this tautorial thanks bro!

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

[@bsewall]

Super clear explanation. Thanks for the video!

[@basarat]

Thanks 🌹

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

[@developerakhter______0076]

*Mr. Straight Forward. ❤️*

[@basarat]

Thanks! Love it 😊

[@knitest1ck]

Awesome man this is great, subscribed

[@basarat]

Awesome, thank you!

[@seebsk6215]

thanks. it was easy to learn

[@mahdigh-rj4pd]

Thank you bro it was so useful

[@devsilvamarcus]

Thank you men!

[@SpaceDino6928]

Awesome, thank you!

[@tanishqbaweja9194]

very beautifully explained!

[@Bupyeong_31]

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

[@BaburaoMeriga]

Simple and clear

[@basarat]

Thanks 🌹

[@nsolomonsudhirprabhakar7317]

I like the way you explained with animation

[@basarat]

Thanks! Editing these tutorials takes a lot of time 😂

[@ed5616]

is sm rules not for the small screen ?

[@fakhreddinefarik-lw1ey]

Thx bro for this beautifull lesson

[@basarat]

Thanks 😊

[@johanesalberto6136]

thank you so much brother

[@elcodigo4421]

Gracias...estaba buscando un video como este.

[@basarat]

Glad it was useful Thanks for leaving a comment

[@nanotichorizon9644]

Great breakdown!

[@basarat]

Thanks!

[@ogs102]

simply simplified

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

[@funwith960fps9]

Great explanation❤

[@owlbynight_js]

This video is amazing. Thank you.

[@harryakbaram]

Thanks for the video!

[@soumavabanerjee5925]

Amazing content man, keep rolling out more !

[@basarat]

Thanks
Positive feedback like this is what makes it worthwhile

[@whoisarjen6368]

Very usefull, thanks for posting!

[@basarat]

Thank _you_ for leaving a comment 🤗

[@codetoday5224]

it is very helpful sir

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

[@Electro_69]

But how to do it in map method

[@sunilshah300]

Thank you sir

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

[@maysamtayyeb4552]

Just fantastic!

[@basarat]

Thanks Maysam 😊

[@itsgoubie]

Very objective, thank you

[@basarat]

Cheers 🍻

[@shasik5324]

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

[@UsmanKhan-nc2md]

great Sir ....
thank you

[@basarat]

Thank *you* for leaving a positive comment 🤗

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

[@Abishek-b5y]

Thanks!

[@basarat]

Wow. Thanks 🤩

[@worldrealprincess]

tnx bro

[@basarat]

Thank you 🫰🏻

[@dollnguyenstudio9528]

thank you

[@amirbahador.developer]

ty sir 🙏🏻🌹❤️👍

[@basarat]

You used my favourite emojis 😊

[@blackpurple9163]

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

[@psyferinc.3573]

thank you

[@basarat]

Cheers

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