Responsive Dashboard Layouts with CSS Grid

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).

👉 Discord: all my courses have a private Discord where I actively participate

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

[vinnymurphy]

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

[arya]

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

[igboanugwocollins]

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

[neilmorano]

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.

[shekhariyer]

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

[jlchiva]

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

[stivenmedina]

Very helpful video, thank you so much

[linusjokela]

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.

[TheSurajJaiswalll]

That helps me alot bro, thanks bro 🤝🤝

[ndskphf]

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

[vintech_webb]

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

[Leon-gunh]

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

[tarikkapetanovic]

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 :)

[RifatBilgi]

Bootstaro 5, Can you make admin panel ?

[manhtuong]

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

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

[alphacentauri]

.main > * { grid-area: initial }

> * This selects all child elements