CSS Grid Playground
Learn CSS Grid by Playing
Grid creates two-dimensional layouts (rows AND columns at once). Drag sliders and watch the grid form. No code typing needed.
Grid Basics: Columns, Rows & Gap
These three properties create any grid. Drag the sliders and watch items rearrange.
Flexbox vs Grid — When to use each
Flexbox = one direction at a time (row OR column). Great for navbars, button rows, card strips.
Grid = two directions at once (rows AND columns). Great for page layouts, galleries, dashboards.
Think: Flexbox for components, Grid for layouts.
Column Sizing: fr, px, auto, minmax
Not all columns need to be the same width. Mix different sizing units.
What is "fr"?
fr stands for "fraction." It divides available space proportionally. 1fr 1fr 1fr = three equal columns. 1fr 2fr 1fr = middle column is twice as wide. 200px 1fr = first column is 200px, second takes all remaining space. Think of fr as "share of the leftovers."
Equal: All columns get the same fraction of space (1fr each). They share equally.
Grid Spanning: Items Across Multiple Cells
Make items stretch across columns or rows. Click an item, then set its span.
grid-column and grid-row
grid-column: span 2 makes an item stretch across 2 columns. grid-row: span 2 stretches across 2 rows. You can also use exact line numbers: grid-column: 1 / 3 means "start at line 1, end at line 3" (same as spanning 2 columns).
Click a cell in the grid, then adjust its span:
Real-World Grid Layouts
Click any layout to see it built with CSS Grid. Study the code, then copy it.
Click a layout above