CSS Grid Tutorial | Responsive Crash Course

Comprehensive look at the CSS Grid and its various properties for doing responsive web design using the new CSS Grid spec. Learn Grid layout, specific Grid properties, and the new CSS Grid fraction unit of measure! Learn how easy it is to build responsive web designs using the new grid spec.

Subscribe:

0:00 Introduction
0:24 A BIT OF HISTORY (TABLES)
1:05 A BIT OF HISTORY (FLOATS)
1:46 A BIT OF HISTORY (POSITIONING)
2:21 A BIT OF HISTORY (FRAMEWORKS)
3:04 A BIT OF HISTORY (FLEXBOX)
3:46 A BIT OF HISTORY (GRID)
4:16 BROWSER SUPPORT FOR CSS GRID
4:51 CSS FLEXBOX VS GRID
5:13 THE GRID MODEL
6:59 GRID LINES
7:12 GRID TRACKS
7:25 GRID CELLS/ITEMS
7:36 DISPLAY:GRID
8:10 GRID-TEMPLATE-COLUMNS
9:17 GRID-TEMPLATE-COLUMN UNITS
9:47 FRACTION SIZE
12:31 REPEAT(#,PATTERN)
14:00 REPEAT (AUTO-FILL)
14:54 SAME PROPERTIES
15:46 GRID-AUTO-ROWS
20:15 GRID-GAP
21:06 GRID-LINES
26:17 GRID-TEMPLATE-COLUMN'S JOB
26:55 GRID-LINE NAMES
28:57 COMBINE COLUMN & ROW
31:18 GRID-TEMPLATE "AUTO" PROPERTIES
35:57 GRID-TEMPLATE-AREAS (AUTO)
38:13 RESPONSIVE GRID-TEMPLATE-AREAS
41:26 JUSTIFY & ALIGN (BOX ALIGNMENT)
41:51 JUSTIFY & ALIGN (GRID PARENT)
42:21 JUSTIFY & ALIGN (GRID CHILDREN)
42:38 JUSTIFY & ALIGN (SELF)
43:04 THAT'S IT!

[Myndrios]

Table of Contents:
0:24 - A Bit of History
4:16 - Browser Support
5:08 - Grid Model
8:10 - Grid-Template-Columns
9:16 - New Unit of Mesurement
10:57 - minmax() / max-content
12:31 - repeat()
14:00 - Repeat: auto-fill
15:46 - Grid-Auto-Rows
18:21 - Grid-Auto-Flow
20:15 - Grid-Gap
21:07 - Grid-Lines
26:55 - Grid-Line-Names
31:18 - Grid Template "Auto"
32:43 - Grid-Template-Areas
35:57 - Grid-Template-Areas "Auto"
38:13 - Responsive Grid Areas
40:31 - Empty Grid Cell
41:25 - Justify & Align

(I did this for me, but its a nice bonus that everyone else can use it here too)

[danielbennett]

Insane amount of content in 40 mins. This is probably the best guide to grid iv'e found. Great format, looking forward to more in 2020!

[regbarnard]

Thank you so much, the best CSS Grid explanation video on YouTube

[dougui]

you know the tutorial is good when you stop in the beginning to comment and say how good it is, thank you my friend for such great tutorial.

[alexmartin]

Andrew! As an 83 year old novice who as looked at many “crash courses” to help me rebuild my website using a “grid” system, this is the best I have seen.

This video has now been bookmarked/ shared on to my PC so that I can quickly refer back to it as and when I need guidance!

Your graphics( which I think are the reason I liked this video so much) we’re “ idiot proofed” which is the sort of thing that makes it so understandable to a novice (idiot) like me!

Thank you very much now. I think I can get on with my rebuild!

[shahriaar]

The only video about grids that doesn't jump around on topics like a lost child. I recalled everything I needed to after a gap, thanks to this.

[taariqq]

'That' was incredibly helpful. Somehow seeing the slides turned out to be better than 'having' to follow the presenter type the code as well. Maybe it is the attention deficit problem or something, but this was truly very helpful.
Thank you!

[itsjustanumber]

This is an Amazing Tutorial. I was so afraid of all the terms and concepts in HTML & CSS. This has opened my eyes, and made me realize how important it is to learn Basic Concepts in any subject you're trying to learn. I'm going to watch this as often as it takes for me to fully understand and use CSS Grids!! Great Job !!

[shnam]

I watched different tutorials last year, but I had this feeling that something was wrong! I could understand, but I couldn't use it properly & I didn't know why. The way you taught it is different & it answered my question! Thanks a lot.

[andrewliamdesigndevelopment]

Absolutely amazing presentation. Much more helpful than "hey guys, watch me code this, but not show you the Firefox grid, or really explain the properties and values."

I had started learning Flexbox, but grid are SO much cooler. (And arguably more flexible, ironically.)

[bulldawg]

Outstanding presentation! The BEST I've seen on YT so far ...

[Cilloux]

So clear in 43 minutes. Don't need anything else. Thank you!

[alvarezgamers]

As someone who’s only been coding for about two months. I haven’t heard someone explain in great but simple details the way you do. Good stuff. Sub here !

[xerxius]

Why does this channel only have 5k subs? Let's get this to 500k everyone !

[svanteljunggren]

I’ve watched 5+ vids on grid, this is the best one, well done!

[ThirtySixOne]

very excellent video, i am in webdevelopment for years and always used float or display flex.
your video explains very everything i needed to know and i understand imeadiatly how this whole display: grid; works and i can AND WILL from now on never use something else.

great work buddy. thank you

[nayinayi]

Wow you can teach elementary school & the kids would get your teaching that's how amazing you are!

[ProfGilRodrigues]

28:55 Combine Column & Row
CSS Grid the best thing I've seen in a while!!!
Like!

[efesezenk]

It is the channel stayed underrated. Perfect presentation, I've learned many things. Thanks for all...

[uiytresen]

For the folks out there: grid-template-area works with css documents, but not within the style= value (inside the tag), because it closes the style= parent at the first ".
I suppose it is a feature.