SUBSCRIBE hit the bell and choose all: https://goo.gl/nYLZvz'>https://goo.gl/nYLZvz'>https://goo.gl/nYLZvz'>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    • #1  Recreating Dribbble shots from s...  

Dribbble shot https://dribbble.com/shots/12915127W...

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 gridtemplatecolumns and gridtemplaterows
11:48 gridautocolumns and gridautorows
12:17 gridautoflow
15:00 gridcolumns gap and gridrowgap
15:16 gridgap
15:44 alignitems, justifyitems and placeitems
17:23 aligncontent, justifycontent and placecontent
19:05 gridtemplateareas
22:20 gridtemplate
23:27 grid
26:00 Grid Item Properties
26:20 gridcolumnstart and gridcolumnend
28:02 gridrowstart and gridrowend
28:40 gridcolumn and gridrow
29:13 alignself, justifyself and placeself
30:31 gridarea
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;
backgroundcolor: whitesmoke;
outline: 8px solid #4834d4;
display: grid;
}

/* ITEM */
.item {
display: flex;
justifycontent: center;
alignitems: center;
border: 1px solid #222;
textalign: center;
boxshadow: 1px 2px 3px grey;
borderradius: 8px;
color: #222;
fontsize: 2em;
fontfamily: arial, sansserif;
backgroundcolor: #f9d423;
fontweight: 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'>https://goo.gl/nYLZvz'>https://goo.gl/nYLZvz'>https://goo.gl/nYLZvz



PREVIOUS VIDEO:    • #36 CSS Flexbox Tutorial for Beginner...  



CSS FULL TUTORIAL:    • #1  What is CSS?  CSS Full Tutorial  



HTML FULL TUTORIAL:    • #1  What is HTML used for?  HTML Fu...  



Text editor used in this lesson: Brackets http://brackets.io/



FACEBOOK:   / devdreamercode  
TWITTER:   / devdreamercode  
SUBSCRIBE and hit the BELL NOTIFICATION : https://goo.gl/nYLZvz'>https://goo.gl/nYLZvz'>https://goo.gl/nYLZvz'>https://goo.gl/nYLZvz


Learn with Dev Dreamer! Step by step and easy to understand :)