Dive into a comprehensive tutorial on CSS Grid, exploring its powerful features for creating responsive web designs. Learn about the evolution of layout techniques, from tables to modern Grid specifications. Discover Grid layout fundamentals, including lines, tracks, and cells. Master essential properties like grid-template-columns, grid-auto-rows, and grid-gap. Explore advanced concepts such as named grid lines, grid template areas, and box alignment. Gain practical knowledge on building flexible and responsive layouts using the fraction unit and auto-fill functionality. Compare CSS Grid with Flexbox and understand their respective strengths. By the end of this 44-minute crash course, you'll be equipped to create sophisticated, responsive web designs using the latest CSS Grid techniques.
Overview
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!
Taught by
FollowAndrew
