Front end
Flexbox playground
Change a property and watch the items move, with a sentence for each one explaining why they went where they did.
The container
The CSS
Why the items sit where they do
Subscribe to My Newsletter
Subscribe to my email newsletter to get the latest posts delivered right to your email. Pure inspiration, zero spam.
Recommended for You
Grid area builder
Paint the layout and take the grid-template-areas. It warns when an area is not a rectangle, which is the mistake that makes the browser throw the whole declaration away.
Breakpoint inspector
Paste your media queries and drag the width to see which match. The buttons jump to one pixel either side of every breakpoint, which is where layouts actually break.
[…] live An explanation of why the items landed there Covers the row and column axis swap explicitly Open the playground Free · runs in your browser · no […]
[…] live An explanation of why items landed where they did Covers the axis swap when direction changes Open the playground Free · runs in your browser · no […]
[…] live to real items An explanation of every placement Covers the axis swap when direction changes Open the playground Free · runs in your browser · no […]