CSS Grid & Flexbox Layout Builder

Drag and drop child elements, adjust container properties, and copy clean CSS output. Switch between Grid and Flexbox modes instantly.

Layout Mode
Container Properties
Container Properties
Item Controls
6
Live Layout Preview
Generated CSS
Key Terms Explained
CSS Grid
A two-dimensional layout system that lets you arrange items into rows and columns simultaneously. Defined on the container with display: grid.
Flexbox
A one-dimensional layout system for distributing space along a single axis (row or column). Defined with display: flex on the container.
Fractional Unit (fr)
A CSS Grid unit that represents a fraction of the remaining free space in the grid container. 1fr 2fr creates two columns where the second is twice the width of the first.
Justify Content
Controls how items are distributed along the main axis (horizontal in a row, vertical in a column). Options include flex-start, center, space-between, and more.
Align Items
Controls how items are positioned along the cross axis (perpendicular to the main axis). Common values: stretch, center, flex-start, flex-end.
Flex Wrap
Determines whether flex items stay on one line (nowrap) or wrap onto multiple lines (wrap) when they overflow the container.
Grid Template Columns
The CSS property that defines the number and size of columns in a grid. Accepts lengths, percentages, fr units, and the repeat() function.

The Complete Guide to CSS Grid and Flexbox

CSS layout stopped being painful once Grid and Flexbox arrived. Together they cover virtually every layout pattern you encounter in modern frontend work - from full-page scaffolding to fine-grained component alignment. This guide explains when to reach for each one, how to read the generated CSS from this tool, and the most common pitfalls to avoid.

How to Use This Tool

Select your display mode (Grid or Flexbox) using the toggle at the top left. The control panels will adjust to show only the relevant properties - unused panels fade out to keep the UI clean. Adjust container properties and the child element count to see the live preview update in real time. Drag and drop the colored boxes in the preview to reorder them. The Generated CSS panel always reflects the current state and is ready to copy.

Understanding the Generated CSS

The output uses two class selectors: .layout-container for the parent element and .layout-item for each child. Drop these into your own stylesheet and apply the classes to your HTML. You do not need to keep any of the preview styling - the generated CSS contains only the structural layout properties.

In Grid mode the output includes display: grid, grid-template-columns, grid-template-rows, and gap. In Flexbox mode it includes display: flex, flex-direction, justify-content, align-items, flex-wrap, and gap.

Grid vs. Flexbox: Practical Patterns

Grid excels at card grids, page shells (header, sidebar, main, footer), and any layout where you want rows and columns to line up across the entire container. The canonical use case is a responsive card grid: grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) creates as many columns as will fit without a single media query.

Flexbox excels at navigation bars, toolbars, button groups, and centering a single element inside a container. Its strength is that items can shrink and grow to fill available space (flex-grow, flex-shrink, flex-basis) without you having to calculate widths explicitly.

The repeat() and minmax() Functions

repeat(3, 1fr) is shorthand for 1fr 1fr 1fr - three equal columns. repeat(auto-fill, minmax(200px, 1fr)) creates as many columns as will fit, each at least 200px wide. minmax(min, max) sets a floor and ceiling for a track size, making grids intrinsically responsive. These are the two Grid functions you will use in nearly every project.

Frequently Asked Questions

When should I use CSS Grid vs. Flexbox? +
Use CSS Grid for two-dimensional layouts where you need to control both rows and columns at the same time - things like page scaffolding, card grids, and dashboard panels. Use Flexbox for one-dimensional layouts where items flow along a single axis - navigation bars, button groups, centering a single element, or distributing space between items in a row or column. A common pattern is to use Grid for the outer page structure and Flexbox inside individual components. The two are complementary, not competing.
How does the fr unit work in CSS Grid? +
The fr (fractional unit) represents a fraction of the available free space in the grid container after fixed and auto-sized tracks are accounted for. For example, grid-template-columns: 1fr 2fr creates two columns where the second is always twice as wide as the first, and together they fill the container. Writing repeat(3, 1fr) is shorthand for three equal-width columns. The fr unit is similar to flex-grow in Flexbox - it distributes leftover space proportionally. Unlike percentages, fr values automatically adapt as you add or remove tracks without you needing to recalculate.
Is it bad practice to nest Flexbox inside Grid? +
No - nesting Flexbox inside Grid (or Grid inside Flexbox) is completely normal and widely used in production. A grid cell is just a block-level box; you can apply any display value to it including flex or grid. This technique lets you use Grid for the macro layout of a page while using Flexbox inside each cell for fine-grained alignment of its content. Browsers handle nested layout contexts independently, so there is no performance penalty or rendering issue with nesting them.
What is the difference between justify-content and align-items? +
In Flexbox, justify-content controls alignment along the main axis (the direction set by flex-direction), while align-items controls alignment along the cross axis (perpendicular to it). If flex-direction is row, justify-content aligns items horizontally and align-items aligns them vertically. If flex-direction is column, the axes flip. In CSS Grid, justify-items aligns grid items within their cells on the inline (horizontal) axis, while align-items aligns them on the block (vertical) axis. The justify prefix always refers to the inline or main axis; the align prefix always refers to the block or cross axis.