Tools

Flexbox & Grid Playground

Toggle between Flexbox and Grid, adjust properties, and see the layout update instantly. Copy the generated CSS when you're done.

1
2
3
4
5
6
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
}

Flexbox vs Grid — when to use which

Flexbox is one-dimensional — it arranges items along a single axis (row or column). It's ideal for navigation bars, button groups, card footers, and any layout where items flow in one direction and need to align or distribute along that axis.

Grid is two-dimensional — it controls both rows and columns simultaneously. Use it for page-level layouts, image galleries, dashboards, and anywhere you need items to align across both axes at once.

Key properties at a glance

  • justify-content — distributes space between items along the main axis (flex) or inline axis (grid)
  • align-items — aligns items along the cross axis within their row or column track
  • flex-wrap — controls whether items wrap onto a new line when they overflow
  • grid-template-columns — defines the number and size of columns; 1fr means one fraction of the available space
  • gap — sets spacing between items without affecting outer edges (replaces margin hacks)