#37 CSS Grid Tutorial [Complete Guide] - CSS Full Tutorial

🙂SUBSCRIBE - hit the bell 🔔and choose all: https://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 - https://youtu.be/f7ECiT4aAFg 👍 Dribbble shot - https://dribbble.com/shots/12915127-Web-App-Panch 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 🔔: https://goo.gl/nYLZvz ------------------ 👈 😃 PREVIOUS VIDEO: https://www.youtube.com/watch?v=-DNLYk5uzl8 ------------------ 👍 CSS FULL TUTORIAL: https://www.youtube.com/watch?v=FFOQRK1K7N0&list=PL7TLF4T4Tq2RCWa-ZRkEWXVtXteyZ2CjK ------------------ 👍 HTML FULL TUTORIAL: https://www.youtube.com/watch?v=0e24EcNapsA&list=PL7TLF4T4Tq2RNvYzF45yOeFi-O1KRAWtu ------------------ Text editor used in this lesson: Brackets - http://brackets.io/ ------------------ FACEBOOK: https://www.facebook.com/devdreamercode TWITTER: https://twitter.com/DevDreamerCode SUBSCRIBE and hit the BELL NOTIFICATION 🔔: https://goo.gl/nYLZvz ------------------------------------------------------------------------------------ Learn with Dev Dreamer! Step by step and easy to understand :-)