Skip to content
toolsdocks

Explore Flexbox and CSS Grid layouts

Switch between flexbox and grid, start from a preset or set properties one by one. Select an item to change its own grow, order or span.

Runs on your device
Loading tool…

How to use

  1. Choose Flexbox or Grid.
  2. Change container properties; select an item to change its own properties.
  3. Copy the CSS and HTML.

Worked example

display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; gives three equal columns.

Supported formats and limits

OutputCSS, HTML
EngineLive DOM preview

Limitations

  • Typed values such as track lists are checked with your browser's own CSS support, so a value newer than your browser is flagged as invalid.

Questions

Can I use the result in my project?

Yes. Copy the CSS and the HTML; pasted into a blank page they produce the same layout as the preview. display: grid with grid-template-columns: repeat(3, 1fr) and gap: 16px gives three equal columns.

Why does a value show as invalid?

Typed values are checked with your browser's CSS support. A typo or a value your browser does not support is flagged and not applied.

Privacy

Runs on your device. Files and text are processed in this browser tab and are not uploaded.

See the privacy policy for how toolsdocks handles data.