Flexbox & Grid Generator
Set flex or grid properties with real controls, watch a live preview rearrange itself, and copy the container CSS that produced it.
About the Flexbox & Grid Generator
Flexbox and Grid solved CSS layout, and they did it with about twenty properties whose names are similar and whose effects are easy to confuse. justify-content works along the main axis, align-items along the cross axis — and which axis is which depends on flex-direction, so the same property moves things horizontally in one configuration and vertically in another. Almost everyone learns this by trial and error.
A visual builder shortens that considerably. Change a value, see the boxes move, and build an accurate mental model of what each property does rather than memorising a table. The two systems are shown separately because they are genuinely for different jobs: flexbox lays out content along one axis and is right for navigation bars, toolbars and button rows; grid lays out in two dimensions at once and is right for page structure, card galleries and dashboards.
The generator outputs the container rules — the declarations you put on the parent — because that is where the overwhelming majority of layout behaviour lives. You can add item counts and see how the layout responds, adjust the gap, and copy CSS that is ready to paste. Nothing here depends on a framework: it is the same CSS you would write by hand, arrived at faster.
How to use it
- Choose flexbox or gridOne axis or two — the tabs switch the entire control set to the properties that system uses.
- Set the main propertiesFor flex: direction, wrap, justify-content, align-items and align-content. For grid: template columns and rows, plus alignment.
- Adjust the gapSet row and column gaps and see immediately how spacing changes the layout's rhythm.
- Change the item countAdd and remove preview items to check how the layout behaves when content grows.
- Read the explanationEach property shows a one-line description of what the selected value actually does.
- Copy the CSSThe complete container rule, ready to paste onto your parent element.
Features
- Both layout systemsComplete, separate control sets for flexbox and CSS grid.
- Live previewItems rearrange as you change values, which is far faster than editing and refreshing.
- Adjustable item countTest the layout with three items and with twelve to see how it holds up.
- Gap controlIndependent row and column gap values with immediate visual feedback.
- Inline explanationsA short description of each property value, so the tool teaches while you use it.
- Copyable container CSSPlain CSS with no framework dependency and no wrapper classes.
Who uses this tool
- LearnersBuild an intuition for justify-content versus align-items by watching them work rather than reading about them.
- Front-end developersSettle on a layout configuration quickly instead of cycling through values in devtools.
- Designers who codeProduce a working responsive card grid without memorising the grid-template syntax.
- TeachersDemonstrate layout concepts live in a lesson with a preview everyone can see.
Tips worth knowing
- Use grid for page-level structure and flexbox for the content inside each region — they are complements, not alternatives.
- repeat(auto-fit, minmax(250px, 1fr)) is the single most useful grid value there is: a responsive card grid with no media queries at all.
- gap replaces margin hacks entirely and is supported in flexbox as well as grid in every current browser.
Frequently asked questions
When should I use flexbox and when should I use grid?
Flexbox is one-dimensional: it lays items out along a single axis and is ideal for navigation bars, toolbars, button groups and anything where content size should drive the layout. Grid is two-dimensional: it defines rows and columns simultaneously and is ideal for page structure, card galleries and dashboards. Most real pages use both.
What is the difference between justify-content and align-items?
justify-content distributes items along the main axis; align-items positions them on the cross axis. With flex-direction: row the main axis is horizontal, so justify-content moves items left and right. With flex-direction: column the axes swap, which is the source of most confusion.
How do I create a responsive grid without media queries?
Use grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). Columns are created automatically to fill the available width, each at least 250px, and the layout reflows as the container changes size with no breakpoints written.
How do I centre something perfectly?
display: grid with place-items: center on the parent centres a child both horizontally and vertically in two declarations. With flexbox, use justify-content: center and align-items: center.
What does flex: 1 mean?
It is shorthand for flex-grow: 1, flex-shrink: 1 and flex-basis: 0%. In practice it means the item takes an equal share of the free space, which is how equal-width columns are made in flexbox.
Does gap work in flexbox?
Yes, in every current browser. It replaced the old pattern of adding margins to children and stripping the last one, and it works identically in flexbox and grid.