CSS Grid Intro and Basic Layout Tutorial for Beginners
Рет қаралды 28,265
Күн бұрынWeb Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
In this CSS Grid intro and basic layout tutorial for beginners, you will learn the CSS grid properties frequently used in constructing grid layouts. You will also create a basic layout with CSS grid.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 This lesson is part of a CSS for Beginners tutorial series playlist:
• CSS Tutorials for Begi...
🔗 All Resources for this CSS Tutorial Series: github.com/gitdagray/css_course
📬 Course Updates ➜ courses.davegray.codes/
CSS Grid Intro and Basic Layout Tutorial for Beginners
(00:00) Intro
(00:05) Welcome
(00:26) Setup & Starter Code Review
(01:48) Quickest way to apply a grid
(02:32) grid-template-columns
(05:28) grid-auto-rows
(07:01) grid-template-rows, grid-auto-columns
(07:27) row-gap, column-gap, gap
(08:36) grid-column-start & end, grid-row-start & end
(10:49) Viewing your grid in dev tools
(12:19) grid-column, grid-row shorthand
(14:14) align-content, justify-content, place-content
(16:00) Adding HTML for grid-template-areas
(17:49) grid-template-areas, grid-area
(22:14) Experimenting with layout properties
(24:53) CSS Grid Garden
🕹️ Learning Games:
🔗 Flexbox Froggy: flexboxfroggy.com/
🔗 CSS Grid Garden: cssgridgarden.com/
⚙ Web Dev Tools:
🔗 Chrome Browser: www.google.com/chrome/
🔗 Visual Studio Code (VS Code): code.visualstudio.com/
🔗 Live Server VS Code Extension: marketplace.visualstudio.com/...
🔗 vscode-icons VS Code Extension: marketplace.visualstudio.com/...
🔗 Github Themes VS Code Extension: marketplace.visualstudio.com/...
🔗 W3C CSS Validator: jigsaw.w3.org/css-validator/
🔗 Specificity Calculator: specificity.keegan.st/
🔗 HTML Special Characters and Entities: unicode-table.com
📚 References:
🔗 MDN CSS: developer.mozilla.org/en-US/d...
🔗 MDN CSS Basics: developer.mozilla.org/en-US/d...
🔗 MDN CSS Selectors: developer.mozilla.org/en-US/d...
🔗 MDN - How to Apply Colors to HTML Elements with CSS: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Values and Units: developer.mozilla.org/en-US/d...
🔗 MDN - The Box Model: developer.mozilla.org/en-US/d...
🔗 MDN - Styling Lists: developer.mozilla.org/en-US/d...
🔗 MDN - Display Property: developer.mozilla.org/en-US/d...
🔗 MDN - Floats: developer.mozilla.org/en-US/d...
🔗 MDN - Columns: developer.mozilla.org/en-US/d...
🔗 MDN - Margin Collapsing: developer.mozilla.org/en-US/d...
🔗 MDN - White-Space: developer.mozilla.org/en-US/d...
🔗 MDN - Positioning: developer.mozilla.org/en-US/d...
🔗 MDN - Flexbox: developer.mozilla.org/en-US/d...
🔗 MDN - Basic Concepts of Grid Layout: developer.mozilla.org/en-US/d...
🔗 MDN - Grid Template Areas: developer.mozilla.org/en-US/d...
📚 Typography Resources:
🔗 MDN: Fundamental Text and Font Styling - developer.mozilla.org/en-US/d...
🔗 CSSFontStack.com: Websafe Fonts - www.cssfontstack.com/
🔗 MDN: Styling Links - developer.mozilla.org/en-US/d...
📚 Color Resources:
🔗 Coolors Contrast Checker: coolors.co/contrast-checker/1...
🔗 WebAIM Contrast Checker: webaim.org/resources/contrast...
🔗 Coolors Palette Generator: coolors.co/
🔗 HTML Color Codes: htmlcolorcodes.com/
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about CSS Grid Layouts for Beginners helpful? If so, please share. Let me know your thoughts in the comments.
#css #grid #layout
@DaveGrayTeachesCode 2 жыл бұрын
To understand modern CSS layouts, you need to know CSS Grid. It is very useful and can be combined with other layout methods like flexbox when creating a page design. In this tutorial, you will learn many of the grid properties that you will frequently use. That said, there are so many properties available that you should follow this tutorial with a deeper dive into MDN or at least a visit to CSSGridGarden.com to practice your CSS grid skills. If you're just getting started with CSS, I recommend going to the start of this CSS for Beginners playlist: kzfaq.info/sun/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit
@VanPetersonKpoti 8 ай бұрын
I admit that this chapter is at an advanced level, but in the end I'm satisfied. It's a titanic piece of work on your part. Thank you so much.
@medleminabdouli672 7 ай бұрын
thank you a ton! Finally, this is the only lecture from you (my pivotal teacher) that I could not comprehend. It's highly complicated!!! I tried many times but it didn't work out! Anyway thank youuuuuuu!! You've been very helpful for me and my friends too.
@annarubin2538 2 жыл бұрын
I just discovered your videos and wow, I'm glad I did!! The way you explain everything makes the content much easier to understand than f.x. reading an article. Thanks so much, this is really appreciated!
@DaveGrayTeachesCode 2 жыл бұрын
I'm glad my content is helping, Anna! 💯
@NedumEze 2 жыл бұрын
Wow! Gray, you've re-inflated my love for CSS Grid. Thank you very much.
@DaveGrayTeachesCode 2 жыл бұрын
You're very welcome! 💯
@kensleylewis 9 ай бұрын
Thank you Dave Gray for saving the day and making this easy to understand!
@CTILET 2 жыл бұрын
Hi Dave! Glad to see that your chanel is progressing
@DaveGrayTeachesCode 2 жыл бұрын
Hey, thanks! I appreciate your support! 💯🙏
@camip1519 11 ай бұрын
A really great way of teaching , thank's Dave !
@robinheyer708 Жыл бұрын
I'm really enjoying the "Microsoft Edge Tools for VS Code" extension. You're going to get a similar split-screen as Dave has. It takes a little getting used to - you're going to be typing in the dev tools directly instead of the CSS file to take maximum advantage but then you can see what all the options do immediately as you scroll through the list of options without even saving. Your choices will be saved in the CSS if you agree. Using that with this tutorial has been pretty amazing. Using the "Live Server" extension will, imo, still be the best option for testing responsive sites since you'll have the option to drag the sides of the screen to your preferred sizes and instantaneously see how your site changes versus having to type in the viewport sizes in the Edge extension where it becomes a lot less organic / pretty.
@emmanoel7683 2 жыл бұрын
You sir! are God-sent. Your tutorials gives me so much clarity. Thanks to you, I can use flex and grid now.
@DaveGrayTeachesCode 2 жыл бұрын
So glad to hear that, Emma! 💯
@GabrielSouza-yy2rq Жыл бұрын
Great introduction to such a powerful tool. Thanks a lot Dave!
@DaveGrayTeachesCode Жыл бұрын
Very welcome!
@ChristiaanKoppelaar Жыл бұрын
Thanks, Dave. Another excellent tutorial again. Thumbs up!
@DaveGrayTeachesCode Жыл бұрын
Very welcome!
@joeyfluffs Жыл бұрын
perfect pace thank you
@Duelweb Жыл бұрын
Why, oh why have I only just found your channel????? Just love your no-nonsense style of teaching!!!
@DaveGrayTeachesCode Жыл бұрын
Glad you're here! And thank you! 🙏💯
@josephmendes2534 8 ай бұрын
Thank you Dave
@gxvencio 6 ай бұрын
Grid is great thank you teacher Dave
@iambrijeshtoo Жыл бұрын
Thank you!
@aliben123 11 ай бұрын
Thank you for this incredible content!
@damil_grandeur Жыл бұрын
thanks to dave for more enlightenment i'd read pdf but most times it's kinda look weird and hard . but whenever i switch to your tutorial it's always interesting
@DaveGrayTeachesCode Жыл бұрын
Glad to hear that! 💯
@gxvencio 10 күн бұрын
grid layout is great, thank's teacher Dave, without use grid layout to make space, the content stay out of place
@pauwebcreationfreelancer7607 Жыл бұрын
I love your discussions sir and I will be spending my Web Development learning journey here. thanks
@DaveGrayTeachesCode Жыл бұрын
Glad I could help! 💯
@danielglaser4301 3 ай бұрын
Doing a better tutorial is an impossible mission. Thank you so much.
@DaveGrayTeachesCode 3 ай бұрын
You're welcome!
@anthonygeoffrey8063 Жыл бұрын
You're a lifesaver, Sir... Thank you
@DaveGrayTeachesCode Жыл бұрын
Welcome!
@ModaYay 8 ай бұрын
THANK YOU SO MUCH! YOU THOUGHT ME BETTER THAN MY COLLEGE PROFESSOR!!!!
@PatrickBateman_speaks 2 жыл бұрын
Hi Dave, Loving your CSS series. Can you tell when do you plan to complete CSS?
@DaveGrayTeachesCode 2 жыл бұрын
Thank you, Sayan! 🙏 I'm just following the content and trying to touch on all of the essential topics... of which there are many. I do not know exactly, but I am guessing there could still be 10 more lessons / modules before I complete this CSS for Beginners series. 🚀
@aryaprima4698 Жыл бұрын
thankyou dave !. your tutorial so good, When I watched this tutorial, I thought about creating a gallery with a grid for my first website :>
@DaveGrayTeachesCode Жыл бұрын
Glad it helped!
@raymboyevshohzod635 2 жыл бұрын
Dave wish you good luck! Don't get tired of working! Can you teach me React js if you can?
@DaveGrayTeachesCode 2 жыл бұрын
Thank you! I do have a BIG React.js playlist here: kzfaq.info/sun/PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp
@serabella1434 Жыл бұрын
I never really comment but your videos are really helpful .. you just make everything easier fo understand thank you soo much for you hard work ..
@DaveGrayTeachesCode Жыл бұрын
So nice of you!
@garikmelqonyan6011 Жыл бұрын
Liking your videos before watching them, Dave.
@DaveGrayTeachesCode Жыл бұрын
I appreciate the support and good faith! 💯
@ahmad-murery 2 жыл бұрын
Using template area is my favorite way to plan the main layout of the page (if required) where it's very simple to manipulate to respond to different screen sizes and orientations, I think the vertical scrollbar was activated because of the container min value specified in grid-auto-rows: minmax(150px, auto), using auto can fix it to some extent, or, maybe we can set the body height to 100vh, then add overflow: scroll to the main, it's ugly and unusual I know but possible, BTW, in the video description there is a semi-colon in the time of chapter "Experimenting with layout properties", Thanks Dave, that was a great video as usual,
@DaveGrayTeachesCode 2 жыл бұрын
Ahmad, I appreciate your feeback and input as always my friend. Right on all accounts! 💯🙏
@ahmad-murery 2 жыл бұрын
@@DaveGrayTeachesCode and I really do appreciate your interaction with your followers too my friend 👍🚀✔
@arielcrespo9021 2 жыл бұрын
I saw your HTML & CSS tutorials. They were amazing! Also, played the grid garden and flexbox froggy games. (so funny and useful) What do you recommend to do to practice these two languages and before moving on to JS? Thanks Dave!
@DaveGrayTeachesCode 2 жыл бұрын
Thank you, Ariel 🙏 I suggest building some web pages about topics that interest you.
@shinstorm3473 2 жыл бұрын
Hi Dave This video was great, the way you explained everything made it very easy to understand and follow. Thanks for the hard work you put into these vids for your subs 🤙🤙🤙
@DaveGrayTeachesCode 2 жыл бұрын
Thank you for the kind words, Shin! 🙏💯
@almamunmuhammadabdulla2295 Жыл бұрын
THANKS FROM BANGLADESH.
@DaveGrayTeachesCode Жыл бұрын
You're welcome and hello to 👋 Bangladesh!
@debajitchakraborty2711 11 ай бұрын
How can we make the final grid layout that was shown in the tutorial responsive for mobile screen size??
@Grihlo Жыл бұрын
Thanks for another amazing tutorial Dave! 15:00 - I tried to use display:flex; for child-element (instead of display:grid;) and applied "place-content: center;" but for some reason it only considered in one direction (i.e., horizontal as justify-content) and ignores vertical center-alignment.. Probably there are some details that I missed.
@DaveGrayTeachesCode Жыл бұрын
Yes, grid can use a place-content rule. With flex, to center we use justify-content: center; And align-items: center; ...keep making progress! 🚀
@oussemabouyahia474 5 ай бұрын
can you add how to make it responsive as you did with display flex?
@servant-of-the-Praiseworthy 2 жыл бұрын
Hi Dave, I was just wondering that maybe at the end of tutorials like this, we get some sort of "active" usage on an actual webpage/website of the property in question, just to "visualize?" the property we're learning in what it could be used to create. I don't know, something around those lines...
@DaveGrayTeachesCode 2 жыл бұрын
Thanks for the suggestion, and I've been trying to do that when possible. For example, the navbar at the end of the list-style-types lesson or lesson 9 is a mini-project that brings together everything from the previous 8. At the end of this grid tutorial, I thought pulling together a layout with a header, main with nested grid, aside, and footer was a quick example of what was possible, too. Thanks again for the feedback!
@robinheyer708 Жыл бұрын
Unironically got stuck for an hour on the grid-auto-rows setting because I putcommas between the values. Anyone learning a programming language in tandem with CSS will probably run into this sooner or later. Markup language (*ML) doesn't use commas like that... So far, grid feels harder than flex so I'll be playing in the garden for a while ;)
@badcatdesign 2 жыл бұрын
Can't wait till Grid Garden updates for Subgrid 🥕
@DaveGrayTeachesCode 2 жыл бұрын
That will be nice! 🚀
@portiseremacunix 2 жыл бұрын
Great tutorials. should I use native CSS, or should I use bootstraps or something new called tailwind?
@DaveGrayTeachesCode 2 жыл бұрын
You should learn CSS first. Afterwards, you can use a framework like Tailwind, Bootstrap, and others.
@portiseremacunix 2 жыл бұрын
@@DaveGrayTeachesCode thanks. got it. i really like your videos while hating CSS...
@shineLouisShine 2 жыл бұрын
Thank you for another great video. I hope that it is ok that I ask questions when they arise(?).. (..And If so..) 14:00 - Why doesn't the grid implicit calculate boxes 3 and 4 at those positions even before box 2's declaration of - " grid-row: 3 / 4 " ? (...while it already seems "implicitly legit" once box 2's decleres of - " grid-column: 1 / 5 ")
@DaveGrayTeachesCode 2 жыл бұрын
It will implicitly fit any grid item in the first available space that is not explicitly needed for a specifically defined grid item. I think the "even before" part of your question indicates it is calculating the space for boxes 3 and 4 first. It is not. It reads the classes (definitions) from the stylesheet first - the first and second boxes - and then implicitly places anything that is not defined.
@shineLouisShine 2 жыл бұрын
(* Although I didn't want to bother you with another massage by responding: "Thank you", I wasn't completly sure if simply "liking" (thumb up) your massage will reflect my appreciation..) Thank you.
@DaveGrayTeachesCode 2 жыл бұрын
@@shineLouisShine you're welcome! 🙏
@webb-developer 6 ай бұрын
✅
@sherwinjayromano5072 2 жыл бұрын
What is the difference between min-height and height alone sir?
@DaveGrayTeachesCode 2 жыл бұрын
Height specifies the height of an element (developer.mozilla.org/en-US/docs/Web/CSS/height) and min-height specifies the minimum height of an element (developer.mozilla.org/en-US/docs/Web/CSS/min-height) which will allow it to grow with the content you put inside the element. Using min-height insures your content will not outgrow the height of your element.
@chrisstucker1813 Жыл бұрын
Good tutorial as always Dave but man does css grid suck compared to flexbox.
@DaveGrayTeachesCode Жыл бұрын
You might find it handy sometime! 😀🚀
@auntypizza Жыл бұрын
This is NOT a beginner's tutorial. Put yourself in the shoes of someone who knows nothing about this topic. You jumped into new selectors then barely explained them. Next....
@DaveGrayTeachesCode Жыл бұрын
That's because this is number 15 in a series of CSS tutorials. If you follow in order, you've already been introduced to those.
Dave Gray
Рет қаралды 25 М.