CSS Grid Tutorial | Responsive Crash Course
YouTube Viewers YouTube Viewers
42.7K subscribers
137,459 views
0

 Published On Feb 23, 2018

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:
http://www.youtube.com/c/FollowAndrew...

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!

show more

Share/Embed