CSS Master · Layout

Blueprint — CSS Flexbox & Grid game

Make the layout match the dashed blueprint. You change real CSS values and the browser does the layout, so whatever works here works in production.

0 changespar 2

01Center the div

Flexbox
0/1 on the blueprint

The classic. Put the box dead center, on both axes.

  • blueprint
  • on target

About Blueprint

Blueprint is a CSS game for Flexbox and Grid together. Change real CSS until your layout matches the dashed target — the same patterns that show up in frontend interviews.

What you practice

FAQ

What is Blueprint on Playhire?
Blueprint is a free CSS Flexbox and CSS Grid game. Each level shows a dashed blueprint; you edit real layout CSS until the live preview matches, then read a short interview-style answer.
Does Blueprint teach CSS Grid or only Flexbox?
Both. Early levels focus on Flexbox interview classics (centering, space-evenly, flex: 1). Later levels cover Grid topics like fr units, grid-template-areas, auto-fit and dense packing.
Are these CSS Flexbox games free?
Yes. Every Playhire CSS game — Flex Escape, Flex Strike, Blueprint, Drone Dock and more — is free to play in the browser. Sign in only if you want XP, leaderboard rank and certificates.
Do I need to install anything to play a CSS game?
No. Open the game in your browser, write real CSS, and see the layout update instantly. No npm install, no signup required to start.
Is this a Flexbox Froggy alternative?
Playhire’s Flexbox games teach the same CSS Flexbox skills (justify-content, align-items, flex-direction, gap, order, flex-grow) but with different themes: escape rooms, shooters, blueprints and drone docking — plus Grid, selectors and HTML labs on the CSS Master path.

More CSS games