#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 - • #1 - Recreating Dribbble shots from scratc... 👍
Dribbble shot - https://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 🔔: https://goo.gl/nYLZvz
------------------
👈 😃 PREVIOUS VIDEO: • #36 CSS Flexbox Tutorial for Beginners [Co...
------------------
👍 CSS FULL TUTORIAL: • #1 - What is CSS? - CSS Full Tutorial
------------------
👍 HTML FULL TUTORIAL: • #1 - What is HTML used for? - HTML Full Tu...
------------------
Text editor used in this lesson: Brackets - http://brackets.io/
------------------
FACEBOOK: / devdreamercode
TWITTER: / devdreamercode
SUBSCRIBE and hit the BELL NOTIFICATION 🔔: https://goo.gl/nYLZvz
------------------------------------------------------------------------------------
Learn with Dev Dreamer! Step by step and easy to understand :-)
In questa pagina del sito puoi guardare il video online #37 CSS Grid Tutorial [Complete Guide] - CSS Full Tutorial della durata di ore minuti seconda in buona qualità , che l'utente ha caricato Dev Dreamer 01 novembre 2020, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 136,577 volte e gli è piaciuto 4.4 mille spettatori. Buona visione!
