Skip to content
FR

Flexbox and CSS Grid playground

Try flexbox and CSS Grid live: direction, alignment, wrapping, columns, gaps and the size of each item. Copy the CSS code.

  • Free
  • No sign-up
  • No file uploaded
  • Windows, Mac, Android, iPhone

Loading the tool…

About this tool

Learn and tune flexbox and CSS Grid while seeing the result immediately: direction, wrapping, justify-content, align-items, align-content, gap, fixed or automatic columns, and each item's size (flex-grow, columns or rows spanned). The CSS code is ready to copy.

When to use it

Learn CSS layout

Changing a property and instantly seeing the items move is the fastest way to understand justify-content versus align-items.

Build a navigation bar

Logo on the left, links on the right: justify-content: space-between and align-items: center solve it in two lines.

Create a responsive gallery

A grid with a minimum width shows 1 column on phones and 4 on large screens, with no media query.

How to use

  1. Choose Flexbox or Grid.
  2. Set the container properties and watch the items move.
  3. Tap an item to set its size, then copy the code.

How it works

The preview is a real flexbox or grid box rendered by your browser with the displayed code, not a simulation. The preview area can be resized to test different widths.

Only properties that differ from the defaults are written. Item-specific settings produce a separate .element:nth-child(n) rule.

Tips for best results

  • Use gap instead of margins: the space only appears between items.
  • To center an element perfectly, display: grid and place-items: center are enough.
  • flex-grow: 1 on a single item makes it take all remaining space (search bar, main content).
  • Resize the preview area to check the behavior on mobile.

Common problems and fixes

align-content has no effect

It only applies with several lines: enable flex-wrap: wrap and add items.

Items overflow the container

With flex-wrap: nowrap, they stay on one line. Switch to wrap or make them smaller.

The grid has only one column

With a minimum width too large for the area, only one column fits. Lower the minimum width.

Frequently asked questions

Flexbox or Grid: which one?

Flexbox lays items out on one line (or column) and shares the space between them: menu bars, buttons, aligned cards. Grid organizes rows and columns at once: page layouts, galleries, dashboards.

What does justify-content do?

It distributes items along the main axis: at the start, center or end, or with equal space between them.

How do I make a grid that adapts to the screen?

Set a minimum width: the grid uses repeat(auto-fill, minmax(…, 1fr)) and fits as many columns as the width allows, with no media query.

Why are some properties missing from the code?

The tool only writes what differs from the defaults, so the code stays short and readable.

Related searches

Still stuck?

Ask on the forum: the category, the tool, your device sheet and the test result will be filled in for you.