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: 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!