Responsive Dashboard Layouts with CSS Grid

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Add authentication to your app FAST: bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (BIG update soon): email.bytegrad.com
0:00 Intro
0:52 Simple dashboard layout
8:33 Header on top
9:43 Grid-template-areas
12:02 Complex dashboard layout
16:17 Adding gutters / gaps
19:30 Mixing Flexbox and CSS Grid
20:43 Responsiveness
#cssgrid #responsive_web_design #responsivewebsite #webdevelopment #coding #programming

[@vinnymurphy5994]

I've been struggling all week with wrapping my head around CSS Grid. This video made it all click so much better. Thank you!

[@arya0287]

So far, this is the best explanation of css grid for me, thank you

[@shekhariyer327]

i can't tell how good his course on javascript was, i took detailed notes, completed 2 mini-projects so far

[@paulvincentsumalinog3083]

hello sir, how's the course?

[@neilmorano3211]

This tutorials is top tier! I hate css grid cuz of complexity, but after watching this vid, I'm starting to love CSS Grid. ❤❤ Thank you for your quality content. You deserve an additional subscriber, which is me.

[@ByteGrad]

Hi, mastering JavaScript is critical if you want to be a modern, professional developer: www.udemy.com/course/professional-javascript-course/?referralCode=0C1D5752923168BC87C2 Also, if you are a front-end developer then mastering CSS (including Flexbox, CSS Grid, etc.) is equally important: www.udemy.com/course/professional-css/?referralCode=4C3C08E82629E6B15752

[@cvt-charlest]

New coupon pls😉

[@CuriousPanda_]

Short and crisp! Thank you :)

[@igboanugwocollins4452]

Thank you for this, this was what I was looking for

[@linusjokela7421]

Good video, it gave me some more knowledge about CSS Grid, i really enjoyed it! I just wanted to point out that you could reduce the amount of CSS by just putting the large screen CSS inside a media query, the default behaviour will look good on mobile.

[@jlchiva100]

Hello Sr, thank you for this video your explain is so good, God bless you from Venezuela

[@AgeGutsChannel]

U have a great way to explain. Very usefull

[@stivenmedina2825]

Very helpful video, thank you so much

[@user-nd7sk2ph4f]

This is a great tutorial for using css grid...Thank you so much!

[@ByteGrad]

Glad it was helpful!

[@arshad1781]

Thanks for sharing free knowledge

[@twattusbobble9845]

Really helpful. Dank je wel!

[@TheSurajJaiswalll]

That helps me alot bro, thanks bro 🤝🤝

[@linusfahlander2449]

Amazing video helpt alot :D

[@dimanaif8345]

Wow this was vey helpful thankkkkk u so much

[@tphrgrcinri]

Brill! Thank you

[@Leon-gu4nh]

Hi, Thanks for videos. Can you make complete study case dashboard using css and javascript of course?

[@luishinojos1829]

it was stonish dude, thanks a lot.

[@vintech_webb]

Thanks for the video, it was helpful. I hope you could create this same project making the nav and header fixed. 🇳🇬🇳🇬🇳🇬

[@itzyadu]

U saved my day 😊

[@ichsandickifareza7980]

Thanks sir

[@RifatBilgi]

Bootstaro 5, Can you make admin panel ?

[@manhtuong1760]

In case there are more than 6 cards, what should I do?

[@asdasd-xp6pj]

can i have copy of the code?

[@tarikkapetanovic9715]

for anyone facing same issues as me, this may not work in Brave browser for some reason, other browsers such as Chrome and Edge, works fine :)

[@harshs538]

Include link to the code also.

[@AcousticPeepo]

why not just put the header and main in their own container? that would make it much easier to setup, if you have to go into the children and set properties there, at that point just use flexbox.

[@ByteGrad]

Yep, flexbox is certainly a good option too. Advantage of CSS Grid here is that you keep thinking in terms of how many columns and rows, which is nicer for global layouts imho

[@alphacentauri8035]

.main > * { grid-area: initial } > * This selects all child elements