Arrange image and text blocks on a modular grid to match a reference layout, scored on alignment, baseline rhythm, and whitespace under a mandatory constraint.
Was this fun?
How to play
Drag blocks onto the grid so they snap to column edges and baseline lines, recreating the reference. A constraint card sets a rule you must obey or your score is slashed.
Drag each block; release near a column edge and baseline to snap it into place.
Hold the peek button to compare against the faint reference layout.
Meet the constraint card's rule before submitting.
Live meters track alignment, baseline rhythm, whitespace, and overall match toward a 1000-point score.
Controls
Desktop: drag blocks; click Snap all, hold to peek reference, New, and Submit layout.
Phone & tablet: drag blocks with your finger and tap the buttons, touch-friendly.
Game modes
Daily (same layout for everyone) and Practice (fresh random rounds).
Tips & strategy
Satisfy the constraint first, violating it slashes the score no matter how clean the layout looks.
Use Snap all to clean up alignment, then nudge blocks to match the reference's whitespace balance.
What you'll learn
Layout Grid teaches the grid systems, baseline rhythm and whitespace that underlie graphic design.
For parents & teachers: the grids behind good graphic design.
Origins
Snapping blocks to column edges and baselines to recreate a reference is the typographic grid, the underlying structure of page design.
Adding a constraint card that must be obeyed is the original demand.
A grid is a set of decisions made once so they need not be remade per element, which is why an arbitrary extra rule is a fair test. Designing within a constraint you did not choose is the normal professional condition, and it is where a grid earns its keep.
About Layout Grid
Layout Grid teaches the grid systems, baseline rhythm, and whitespace that underlie graphic design. It is an original, free browser game built in-house.
A free, original browser game on PlayPendium. No download, no install.
