Mastery Points
0
Active Mission
Mission: Change 'grid-cols-2' to 'grid-cols-3' to create a 3-column matrix.
Objective: add grid-cols-3 to the code
Current MissionIN PROGRESS
Riddle:Mission: Change 'grid-cols-2' to 'grid-cols-3' to create a 3-column matrix.
33%
Reward: 75 XP Verified
CSS Grid: The Matrix Layout System in html-css
Context & Logic
Grid is the ultimate 2D layout engine for building complex web structures.
Technical Reference
display gridEnables a grid context on the parent.
grid-template-columnsDefines column mapping (e.g. '1fr 2fr').
fr unitFractional unit representing free space.
gapSpace between grid cells.
grid-areaPlace items in specific named locations.
Interactive Workshop
Interactive Playground
Source HTMLMarkup
Source CSSStyle
Live Output Pane
Sync activeTailwind Core Loaded
Standard CSS Scope
Auto-Sync Preview
Modify the source above to see live changes. Supports standard CSS and Tailwind utility classes.
Test Your Knowledge
Assessment Mode1Which unit represents a fraction of the available space in a CSS Grid container?