Question 1

What is CSS Grid?

Accepted Answer

CSS Grid is a two-dimensional layout system that arranges elements into rows AND columns simultaneously. Unlike Flexbox (one-dimensional), Grid excels at full-page scaffolding, dashboard layouts, image galleries and any layout where you need precise control over both axes at once.

Question 2

What is the difference between justify-items and justify-content?

Accepted Answer

justify-items aligns grid items inside their own cells along the inline (horizontal) axis — each item is positioned within its assigned area. justify-content aligns the entire grid track layout inside the container when the grid is smaller than the container (when tracks use fixed sizes that don't fill the whole space). Same logic applies to align-items vs align-content on the block (vertical) axis.

Question 3

What does grid-auto-flow do?

Accepted Answer

grid-auto-flow controls how the auto-placement algorithm fills empty cells. row (default) fills each row left-to-right before moving down. column fills top-to-bottom in each column before moving right. dense backfills holes left by larger items — useful for masonry-style layouts but can visually reorder items.

Question 4

Does this Grid Playground send my CSS to a server?

Accepted Answer

No. Everything runs locally in your browser. Sliders, previews and CSS generation happen on your device — your layout stays private.

Container

Per-item placement

Generated CSS