#37 CSS Grid Tutorial [Complete Guide] - CSS Full Tutorial
Vložit
- čas přidán 3. 07. 2024
- 🙂SUBSCRIBE - hit the bell 🔔and choose all: goo.gl/nYLZvz
In this Complete Guide to CSS Grid we go through the entire CSS Grid layout system step by step, first we’ll go through all the grid container properties and then all the grid item properties with examples throughout, and make sure to watch right to the end because we’ll be building a dashboard layout using CSS Grid.
Remember to Comment, Like, Share and Subscribe!
Here’s a video of the dashboard design from scratch - • #1 - Recreating Dribbb... 👍
Dribbble shot - dribbble.com/shots/12915127-W...
Chapters:
0:00 - Intro
0:40 - What is CSS Grid?
1:00 - CSS Grid vs CSS Flexbox
1:30 - Grid main concepts
2:23 - All CSS Grid Properties
2:40 - Grid Container Properties
3:20 - grid-template-columns and grid-template-rows
11:48 - grid-auto-columns and grid-auto-rows
12:17 - grid-auto-flow
15:00 - grid-columns gap and grid-row-gap
15:16 - grid-gap
15:44 - align-items, justify-items and place-items
17:23 - align-content, justify-content and place-content
19:05 - grid-template-areas
22:20 - grid-template
23:27 - grid
26:00 - Grid Item Properties
26:20 - grid-column-start and grid-column-end
28:02 - grid-row-start and grid-row-end
28:40 - grid-column and grid-row
29:13 - align-self, justify-self and place-self
30:31 - grid-area
32:46 - Building a dashboard layout with CSS Grid
42:40 - Like and Subscribe
Follow along:
HTML (angled brackets are not allowed in comments, they've been replaced by parentheses)
(div id="container")
(div class="item one")1(/div)
(div class="item two")2(/div)
(div class="item three")3(/div)
(div class="item four")4(/div)
(div class="item five")5(/div)
(div class="item six")6(/div)
(/div)
CSS
/* CONTAINER */
#container {
width: 95vw;
height: 60vh;
margin: 0 auto;
background-color: whitesmoke;
outline: 8px solid #4834d4;
display: grid;
}
/* ITEM */
.item {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #222;
text-align: center;
box-shadow: 1px 2px 3px grey;
border-radius: 8px;
color: #222;
font-size: 2em;
font-family: arial, sans-serif;
background-color: #f9d423;
font-weight: bold;
cursor: pointer;
}
.item:hover {
color: #fff;
}
#cssgrid #cssgridtutorial
This lesson is part of a wider CSS Full Tutorial which you find here: shorturl.at/muIKS
SUBSCRIBE and hit the BELL NOTIFICATION 🔔: goo.gl/nYLZvz
------------------
👈 😃 PREVIOUS VIDEO: • #36 CSS Flexbox Tutori...
------------------
👍 CSS FULL TUTORIAL: • #1 - What is CSS? - CS...
------------------
👍 HTML FULL TUTORIAL: • #1 - What is HTML used...
------------------
Text editor used in this lesson: Brackets - brackets.io/
------------------
FACEBOOK: / devdreamercode
TWITTER: / devdreamercode
SUBSCRIBE and hit the BELL NOTIFICATION 🔔: goo.gl/nYLZvz
------------------------------------------------------------------------------------
Learn with Dev Dreamer! Step by step and easy to understand :-)
![#36 CSS Flexbox Tutorial for Beginners [Complete Guide] - CSS Full Tutorial](http://i.ytimg.com/vi/-DNLYk5uzl8/mqdefault.jpg)
![#36 CSS Flexbox Tutorial for Beginners [Complete Guide] - CSS Full Tutorial](/img/tr.png)
Hey guys! Thanks for watching 🙂 Here's a list of the timestamps for ease of access:
0:00 - Intro
0:40 - What is CSS Grid?
1:00 - CSS Grid vs CSS Flexbox
1:30 - Grid main concepts
2:23 - All CSS Grid Properties
2:40 - Grid Container Properties
3:20 - grid-template-columns and grid-template-rows
11:48 - grid-auto-columns and grid-auto-rows
12:17 - grid-auto-flow
15:00 - grid-columns gap and grid-row-gap
15:16 - grid-gap
15:44 - align-items, justify-items and place-items
17:23 - align-content, justify-content and place-content
19:05 - grid-template-areas
22:20 - grid-template
23:27 - grid
26:00 - Grid Item Properties
26:20 - grid-column-start and grid-column-end
28:02 - grid-row-start and grid-row-end
28:40 - grid-column and grid-row
29:13 - align-self, justify-self and place-self
30:31 - grid-area
32:46 - Building a dashboard layout with CSS Grid
42:40 - Like and Subscribe
This channel is just a hidden treasure...
Hey 4-D-1-L, thank you for this awesome comment, I appreciate your support. Loads more to come 🙂👍
Agreee!!!!!
I have a feeling you are going to blow up in a couple of months. Your production value and explanation skills are amazing.
🔥Hey Jonathan, thanks again for the great encouragement and support! I really appreciate it, glad you are enjoying the content 🙂👍
He's definitely going to blow up, I mean, at least he should. Best video on CSS grid.
yes i find it completly true, i am going to like all your videos I watch
A legend is born. 🔥
You're right
Honestly, this is one of the best web devs channels on youtube.
Keep up the good job man
Hey Joshua, thanks so much for this awesome comment!! One of the best I’ve received, thank you 🙂👍
No words to explain. You are charm.
Best explanation on grid so far
So glad I found this channel again! Made sure I subbed this time because I thought I did last time but didn't. One of the best web development creators on YT!
all videos are awesome. couldn't resist myself to watch all the videos in one day🙂.
Watched all the videos. Thank you for teaching me!
Best grid explanation I have ever seen
Go On ,man❤
Very explanatory. You are the best.
Some really impressive content, presented with top-notch production quality.
YOU ARE THE BEST! 🙏
l ve never seen more underrated channel than this, great video keep up
Blown away at how clear and thorough this was while also providing a genuinely applicable final example beyond wireframe boxes. Absolutely sub'd, excited to get into your other content as well!
Best css tutorial I have ever seen
Please keep up your kindness
Dev dreamer never disappoints!!!!
Keep it burning 🔥
My friend, thank you so much for this. Really appreciate it.
Honestly this is a job well done
Please continue making CSS videos. Something tells me your channel will grow up very fast. Keep up the good work.
You are a great teacher. I deeply appreciate this video. 🙏
Great video! Thank you!
This is the best tutorial on grid.... It's simplify and well explained... 💯
great! thank you for your explanation
I love love love your stuff!
Time for me to use it to build a pretty calc.
it was sooo useful. thank you ma man
thnx a million, you r the gamechanger
Excellent tutorial
Perfect Tutorial! Thank you very much!
Thank you, BRO...You made my day
BRAVO
Hands down the best CSS grid tutorial on youtube, been searching for full CSS Grid tutorial forever!! Thank you very much! :)
Hey Scarly Designs! Wow, thank you so much for the awesome comment. You’re welcome, I’m glad you enjoyed the video 🙂👍
Amazing !!
Thank you so much for this channel.
moving on to your JS channel
your explanation quality production quality each and everything is beyond what everyone else is teaching seriously man your teaching skill and video skill will remain unmatched for the rest of the years coming thanks again. you won my follow thanks. keep it up plz.
Amazing content ! Feeling so lucky that I found you :)
your tutorial is so helpful, saved me lots of money in learning CSS
This is just brilliant man, I mean it, that quality! I have watched before 6 hours of worst tutorial about grid, 6 hours Carl! (luckuly I did not have to pay for it)
amazing explanation
Exceptional and Nice Video. Well done Dev Dreamer
i have never finished youtube video more than 20 min, but this one i really enjoyed it
Very well explained. I love your tutorials. Thank you very much and keep it up! :)
Hands down, one of the best grid tutorial video on youtube, I have checked your several other videos, top quality content man. Keep up the great work.
Hey Md.Atiquzzaman! Thank you very much brother, really appreciate the support 🙂👍
THE BEST!!!
Thankyou so much for your efforts to devolop this content. I am totally in love with you......please keep going..add more an more videos.....Don't stop 🙏🙏
Your content saves me a lot of time...it's too good 👍👍❤️❤️🔥🔥
Thank u so much bro all my douts are clear .
Best tutorial on css grid!
Thank you, appreciate the love 🙂👍
Seems so op man
Wow. Just wow. The quality in this video is awesome.
Hey Vasi, thank you so much 😎👍
Thanks from Nepal
Their are so many videos on the top when we search about grid but your deserve to be on top asap. 🙌
I don't understand why people can't explain everything. Most of them leave so many things which we then need to look in other places but this tutorial is complete ♥️
🔥 Hey Nitesh, thank you so much for this comment. Really glad you find the video helpful 😃👍
Just discovered your channel. Just amazing. Keep up the good work. Subbed.
Thank you loads ... I have searched the entire internet for an in depth css grid content like this and im glad to have finally found your channel.. thank you very much
Thank you! 🙂
awesome video. thanks for sharing.
This is the best video I have watched on CSS Grid. It is to the point, covering so many elements and not polluting it with constant comparisons to flexbox which often happens on a lot of Grid videos.
Thankyou.
Thank you 🙂👍
Finally a tutorial! Not a speedrun. THANK YOU SO MUCH.
Thanks for watching JustIn, really appreciate it 🙂👍
amazing info structure & quality. Great work!
Hey Ionatan, thank you very much! 🙂👍
Here after watching your Flexbox video, I love how you explain and show everything so neatly, thank you very much! and also thank you for sharing the dashboard design from scratch, after seeing it I inmediatly wanted to try to do it too :)
Hey beyondmystery, thank you so much for your amazing support! Really glad you are finding the teaching useful. Yh it is quite a nice design isn’t it, be sure to stay tuned for more 🙂👍
Best video on CSS grid on the entire CZcams.
Hey Dzenis! Thank you so much for watching and for this awesome comment, it means so much to me 🙂👍
I watched so many tutorials on this topic and yours is by far the best. You clearly have an in-depth understanding that is unmatched, and you are extremely good at explaining in a concise and clear manner. I'm really impressed. Thanks for such a great lesson. Subscribed, liked, and will for sure be watching your other videos!
Thank you for these kind words, glad you found it helpful 🙂👍
You are a wonderful explainer....thank you.
Hi Imrul! Thank you so much 😀👍
Thabk goodness i found your youtube channel! Been able to solve problem in my homework just in few minutes! I love your explanation! Thank you for your good work ❤️
Hey! That’s great news, really glad that this has helped you 🙂👍
This. Was. BRILLIANT 🤩🤩🤩
Hey Michael, thanks for the awesome comment! Glad the tutorial was helpful 🙂👍
Omg i just found the most amazing programming channel on youtube
thanks a lot 🥺💓
Hey man! Just watched your whole series to freshen up my mind, because i wanted to work with SCSS in my laravel project. You are absolutely amazing, keep up with the great work.
🔥 Thank you so much! 🙂👍
I was looking for a quick video to revisit grid as I always end up using flex. This video gave me clear understanding of grid and now I'll be using grid for my upcoming projects. Amazing content.
Hey Miraj, that’s awesome! Thank you so much for watching brother, glad you found it useful. Grid is incredibly powerful, especially when used together with flex box 🙂👍
Excelente tutorial 👌. Thanks a lot for taking the time to show us this in the simplest way possible. Greetings from El Salvador.
Hey Carlos, thank you so much for watching, glad it was helpful 🙂👍
Before this css grid tutorial, grid was nightmare for me, but after watching your tutorial it becomes too much easy😃😊 Really this channel is just a hidden treasure.Thank u so much sir.❤️
Very nice and high quality video !! Keep going man
Hey Dev Prakash Sahoo! Thank you so much brother, loads more to come 🙂👍
Sweet!
Echoing others’ comments - one of the best explanations on Grid I’ve seen and an underrated channel
Hey sgtJA, thank you so so much! Really appreciate this comment and I’m glad you found it useful 🙂👍
So nicely explained. I learned alot.
Hey Dhairya! Thank you so much, really glad it's been helpful 🙂👍
Thanks for details of grid
You’re welcome, thanks for watching 🙂👍
Really well described, you have earned another subscriber
Amazing! Thank you 😃👍
I was going to start learning CSS Grid and then i saw you uploaded a video on it. Talk about some good luck.
Hey man, that is some great luck there, CSS Grid is such a game changer. Thanks once again for the awesome support 🙂👍
What a wonderful video dude! U r completly insane. All the material of this video is incredible, you have a new subscriber here! Greetings from Colombia!
Hey Dilan! Thank you man, I appreciate the love 🙂👍
Well explained, thanks a lot my tutor
Thanks Oluoch! 🙂👍
How does this only have 50k view?! You are a legend. Binging all of your videos this week!!
Thank you, appreciate it 🙂👍
Who are you, who are so wise in ways of css.
CZcams is full of gems💎
♥️♥️
The best ever.. Thank you
Hey Mouad! Thank you very much, thanks for watching 🙂👍
Game changer video.... Keep it up 🙂🙂👍explanation👏
Thank you so much! 🙂👍
God bless you for this tutorial
Thanks for watching 🙂👍
excellent
Here’s a video of the dashboard design from scratch - czcams.com/video/f7ECiT4aAFg/video.html 👍
Thanks you so much ♥
Man youre golden
Thank you! 🙂👍
Amazing
Thanks! 🙂
Excelent tutor. Learned a lot from you. Thank you veru much. Wish you all the best. Peace 😎👍🏻
Hey HULEG, thank you! And thanks for watching, I’m glad it’s been helpful 🙂👍
I have watched some 50 big utube channel tutorials ...until i stumbled upon this gem !
Finally understood everything
Thank you so much...god bless u bro :)
God bless you too, and thank you so much 🙂👍
When u said cool isn't it? I was like no man this isn't cool this is absolutely great, I love it as much as I love your content. Best regards from Poland Sir :)
🔥Hi Filip! Dziękuję Ci bardzo 🙂I appreciate your great support, loads more to come 👍
quality tutorial
Hey Paul-E thanks so much 🙂👍
Amazing video!
Hey Filip! Thank you so much for this awesome comment, I'm glad it's been useful 🙂👍
@@DevDreamer Yeah the only problem with it is that it has too little views and likes haha. Keep up the great work :)
😆 Lol all in good time. You can help by sharing 🙂, thanks again man 🙂 👍
The content on this channel is so good!! The animations, the information, almost everything! The only thing that bothers me is the mic though
Hey Lucas, thanks for the great support! I appreciate that feedback, the audio quality on my latest videos should be better than the earlier videos, but this is definitely something I will take into consideration going forward. Thank you! 🙂👍
This is the next freecodecamp
Thanks for the awesome support 🙂👍
Awsome content. keep it up
Hey Biplap, thank you so much brother! Please stay tuned for more 🙂👍
Thanks
You talk fast and fluently.
You do animations for better visual understanding.
You keep it simple.
You explain straightforward and easy to follow.
Man i wish you best of luck with your channel and more subs.
Oh and could you please also show the css for the .item class at 2:53 ?
I wanted to build your example to follow through. :)
Another question from 2:53 : Why are your numbers in the div.item containers are vertically centered?
I'd rly love to see the magic behind that since in the .container div there is nothing doing that. :)
I would recommend everyone to watch this video at the speed of 0.75 otherwise its a great tutorial!
Hey Dhruvit! Thanks for watching 👍 Do I speak too fast? Lol 😄
All the positive comments are understated. And I concur with each and every one. Not just the best Grid tutorial on the net - but perhaps the best tutorial on the net...Wow Wow Wow !!!
Thank you James! One of the best comments I’ve ever received, thanks for watching and supporting 🙂👍
Cant understand 11 people disliked this while this is virtually the most perfect tutorial out there for grid.
Thank you! 🙂👍
master