Simplifying CSS Grid

Learn CSS Grid by starting with simple concepts and building up to powerful layout techniques. This course covers defining grids, utilizing implicit rows, line-based placement, responsive design strategies, and the 'Grid Template Areas' method for complex layouts.

Coursified Library ↗

source: Kevin Powell

Outline · 7 modules · quiz after each

01Introduction and Project SetupGrid simplifies complex 2D layouts that are difficult with Flexbox3 min

02Basic Grid Setup and UnitsDefine columns using grid-template-columns with the fr unit for fractional space8 min

03Implicit Grids and Column SpanningLeverage the implicit grid by not defining rows, letting the browser create them automatically5 min

04Line-Based PlacementUse grid-column and grid-row with line numbers for precise item placement8 min

05Responsive Design StrategyImplement responsive grids by moving column definitions into media queries4 min

06Introduction to Grid Template AreasDefine grid structure visually using the grid-template-areas property with string notation6 min

07Advanced Techniques with AreasRestructure layouts across breakpoints by solely redefining grid-template-areas on the parent3 min

clone

learner

New

no ratings yet

modules

Cloning copies the outline, quizzes and assessment into your account. The video stays on YouTube; attribution to Coursified Library stays on the course.

Details

Duration37 min

Assessment13 questions · pass 70%

Quiz questions42

LanguageEnglish

CertificateYes · verifiable

NewNo ratings yet