CSS Flexbox & Grid Generator,
visual layout builder with live code.

Layout guide

Flexbox vs CSS Grid: choosing the right layout model for the job.

The fundamental difference

Flexbox and CSS Grid are both layout modules, but they solve different problems. Flexbox is one-dimensional — it lays items out along a single axis, either a row or a column. Grid is two-dimensional — it controls both rows and columns simultaneously.

A good rule of thumb: use Flexbox when you want items to flow naturally and adjust to their content size (nav bars, button groups, card rows that wrap). Use Grid when you have a specific two-dimensional layout in mind (page layouts, image galleries, dashboards with defined regions).

Flexbox in depth

The Flexbox model has two key actors: the flex container(the element with display: flex) and the flex items (its direct children).

• flex-direction defines the main axis:row (default, left to right), column(top to bottom), and their reverses. All other properties are relative to this axis.
• justify-content distributes space along the main axis. space-between places the first item at the start and last at the end with equal gaps between; space-evenlydistributes equal space around every item including the edges.
• align-items aligns items along the cross axis (perpendicular to flex-direction). stretch(default) makes all items fill the container height in a row layout;center vertically centres them.
• flex-grow on an item defines how much of remaining free space that item absorbs. flex-grow: 2 on one item means it takes twice as much leftover space as items withflex-grow: 1.
• flex-shrink controls how items compress when there is not enough space. Items with higher shrink values get smaller proportionally. Setting flex-shrink: 0 prevents an item from shrinking at all — useful for fixed-size sidebars or icons.
• align-self overrides the container'salign-items for a single item, allowing one item to sit at the cross-axis start while others are centred, for example.

CSS Grid in depth

Grid gives you explicit control over both dimensions. You define the columns (and optionally rows) of the layout, and items are placed into that structure automatically, or you can position them manually.

• grid-template-columns is the most important property.repeat(3, 1fr) creates three equal-width columns that share the available space. 1fr is a flexible unit meaning "one fraction of the remaining space."
• auto-fit vs auto-fill: auto-fit collapses empty tracks, stretching existing items to fill the space.auto-fill preserves empty tracks, keeping their reserved space. With minmax(120px, 1fr), both produce responsive columns that wrap automatically — often called an "intrinsically responsive" grid, requiring no media queries.
• column-gap / row-gap (or the shorthand gap) control the gutter between cells. Unlike margins, gaps only appear between items, not at the outer edges.
• grid-column / grid-row on individual items let you span multiple tracks or place items in specific positions:grid-column: 1 / 3 makes an item span from line 1 to line 3, covering two column tracks.

Named template areas

One of Grid's most powerful features is named template areas, which let you build full page layouts with semantic CSS:

Then assign each region on the corresponding element:grid-area: sidebar. This makes the layout intent completely readable in the CSS and easy to reorganise with a media query by simply redefining grid-template-areas.

When to use both together

Flexbox and Grid work naturally together. A common pattern: use Grid for the macro page layout (header, sidebar, main, footer), then use Flexbox inside each region to arrange the items within it. A navigation bar is a classic Flexbox use case nested inside a Grid-defined header.

Neither is superior. The right choice depends on whether your layout is item-driven (let content dictate size — usually Flexbox) or layout-driven (define the structure first, place content into it — usually Grid).