Grid Layouts (the easy way) // Tailwind CSS

[@keifer7813]

Great video and explanation!

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

[@Lazaerus]

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

[@jakemoss8700]

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

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

[@erice.3892]

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

[@soundsofnation5773]

Awesome! Nice explaination

[@crommit8222]

Very clear and understandable explanation. Great video!

[@atg_tube1572]

i loved this tautorial thanks bro!

[@developerakhter______0076]

*Mr. Straight Forward. ❤️*

[@basarat]

Thanks! Love it 😊

[@edwassermann8368]

Amazing and short explanation. Thanks!

[@Bupyeong_31]

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

[@bsewall]

Super clear explanation. Thanks for the video!

[@basarat]

Thanks 🌹

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

[@SpaceDino6928]

Awesome, thank you!

[@tanishqbaweja9194]

very beautifully explained!

[@nsolomonsudhirprabhakar7317]

I like the way you explained with animation

[@basarat]

Thanks! Editing these tutorials takes a lot of time 😂

[@gwemula]

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

[@basarat]

Thanks! Exactly the uplifting comment I needed

[@fakhreddinefarik-lw1ey]

Thx bro for this beautifull lesson

[@basarat]

Thanks 😊

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

[@devsilvamarcus]

Thank you men!

[@nanotichorizon9644]

Great breakdown!

[@basarat]

Thanks!

[@funwith960fps9]

Great explanation❤

[@johanesalberto6136]

thank you so much brother

[@whoisarjen6368]

Very usefull, thanks for posting!

[@basarat]

Thank _you_ for leaving a comment 🤗

[@elcodigo4421]

Gracias...estaba buscando un video como este.

[@basarat]

Glad it was useful Thanks for leaving a comment

[@harryakbaram]

Thanks for the video!

[@Electro_69]

But how to do it in map method

[@owlbynight_js]

This video is amazing. Thank you.

[@codetoday5224]

it is very helpful sir

[@itsgoubie]

Very objective, thank you

[@basarat]

Cheers 🍻

[@soumavabanerjee5925]

Amazing content man, keep rolling out more !

[@basarat]

Thanks Positive feedback like this is what makes it worthwhile

[@UsmanKhan-nc2md]

great Sir .... thank you

[@basarat]

Thank *you* for leaving a positive comment 🤗

[@maysamtayyeb4552]

Just fantastic!

[@basarat]

Thanks Maysam 😊

[@shasik5324]

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

[@ogs102]

simply simplified

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

[@sunilshah300]

Thank you sir

[@ed5616]

is sm rules not for the small screen ?

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

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

[@blackpurple9163]

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

[@worldrealprincess]

tnx bro

[@basarat]

Thank you 🫰🏻

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

[@dollnguyenstudio9528]

thank you

[@amirbahador.developer]

ty sir 🙏🏻🌹❤️👍

[@basarat]

You used my favourite emojis 😊

[@cryptodev2615]

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

[@basarat]

Neat trick

[@psyferinc.3573]

thank you

[@basarat]

Cheers

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