Learn the fundamentals of CSS Grid for creating responsive web designs. Understand Grid layout, properties, and the new fraction unit of measure. The course covers topics such as Grid lines, tracks, cells, and items, as well as responsive design techniques. The teaching method includes a comprehensive tutorial on CSS Grid properties and practical examples. This course is intended for web developers and designers looking to enhance their skills in creating responsive layouts using CSS Grid.
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
