CSS Grid Tutorial - Responsive Crash Course

This course explains how to use CSS Grid for responsive web layouts. It covers the grid model, tracks, cells, template areas, fractional units, gaps, line placement, and alignment, with comparisons to earlier layout methods and Flexbox.

Syllabus

Intro
A BIT OF HISTORY (TABLES)
A BIT OF HISTORY (FLOATS)
A BIT OF HISTORY (POSITIONING)
A BIT OF HISTORY (FRAMEWORKS)
A BIT OF HISTORY (FLEXBOX)
A BIT OF HISTORY (GRID)
BROWSER SUPPORT FOR CSS GRID
CSS FLEXBOX VS GRID
THE GRID MODEL
GRID LINES
GRID TRACKS
GRID CELLS/ITEMS
DISPLAY:GRID
GRID-TEMPLATE-COLUMNS
GRID-TEMPLATE-COLUMN UNITS
FRACTION SIZE
REPEAT(#,PATTERN)
REPEAT (AUTO-FILL)
SAME PROPERTIES
GRID-AUTO-ROWS
GRID-GAP
GRID-LINES
GRID-TEMPLATE-COLUMN'S JOB
GRID-LINE NAMES
COMBINE COLUMN & ROW
GRID-TEMPLATE "AUTO" PROPERTIES
GRID-TEMPLATE-AREAS (AUTO)
RESPONSIVE GRID-TEMPLATE-AREAS
JUSTIFY & ALIGN (BOX ALIGNMENT)
JUSTIFY & ALIGN (GRID PARENT)
JUSTIFY & ALIGN (GRID CHILDREN)
JUSTIFY & ALIGN (SELF)
THAT'S IT!