Skip to main content

CSS Flexbox & Grid Generator

Build flexbox and CSS grid layouts visually, tweak container and item properties, and copy the generated CSS.

Runs 100% in your browser

Shortcuts
Copy the output
Alt + Shift + C

Your input is saved in this browser only. Reset clears it.

Container Properties

Presets

Preview

Item 1
Item 2
Item 3

Item Properties

Item 1
Item 2
Item 3

CSS Code

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  align-content: stretch;
  gap: 0.5rem;
}

.item-1 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.item-2 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.item-3 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

How to use the Flexbox & Grid Generator

  1. Choose Flexbox or Grid, or start from a preset.

  2. Adjust the container properties and individual items.

  3. Copy or download the generated CSS.

Example: A three-column grid

Settings
Mode:    Grid
Columns: repeat(3, 1fr)
Rows:    auto
Gap:     1rem
CSS
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1rem;
  grid-auto-flow: row;
}

Swap the columns value for repeat(auto-fit, minmax(240px, 1fr)) to get a responsive grid with no media queries.

Frequently Asked Questions

Should I use flexbox or CSS grid?

Flexbox lays out items along one axis and is ideal for toolbars, button rows, and card contents. Grid places items in rows and columns at once, which suits page layouts and galleries. They work together: a grid page layout whose cells use flexbox inside is very common.

What is the difference between justify-content and align-items?

justify-content distributes space along the main axis (horizontal in a row, vertical in a column), while align-items positions items on the cross axis. Swapping flex-direction swaps which axis each one affects, which is the usual source of confusion.

How do I build a responsive grid without media queries?

Use repeat(auto-fit, minmax(240px, 1fr)) for grid-template-columns. The browser fits as many 240px-or-wider columns as the container allows and stretches them to fill the row, so the layout reflows at every width without breakpoints.

What do the flex-grow, flex-shrink, and flex-basis values mean?

flex-basis is the starting size, flex-grow says how much of the leftover space an item takes (0 means none), and flex-shrink says how readily it shrinks when space is tight. The shorthand flex: 1 means grow, shrink, and start from zero: equal-width items.

About the Flexbox & Grid Generator

The Flexbox & Grid Generator is a powerful visual tool for creating and customizing CSS layouts using Flexbox and CSS Grid. Whether you're a beginner learning these layout systems or an experienced developer looking to save time, this tool helps you design responsive layouts without writing CSS code from scratch.

Three Visual CSS Tools covers when a visual layout builder saves time, alongside the gradient and border generators.

Understanding CSS Layout Systems

Flexbox

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout method designed for laying out items in rows or columns. Flexbox makes it easier to design flexible responsive layouts without using floats or positioning. It's ideal for components of an application and small-scale layouts.

CSS Grid

CSS Grid Layout is a two-dimensional layout system designed for laying out items in rows and columns simultaneously. Grid gives developers more precise control over the placement of elements in a layout and is perfect for larger-scale layouts and complex designs.

Features of Our Flexbox & Grid Generator

Visual Editor

Design your layout visually with an interactive interface. Add, remove, and customize container and item properties while seeing the changes in real-time. This makes it easy to understand how different CSS properties affect your layout.

Comprehensive Controls

Access all the important Flexbox and Grid properties including flex-direction, justify-content, align-items, grid-template-columns, grid-template-rows, and many more. Fine-tune your layout with precise control over every aspect.

Item-Level Customization

Customize individual items within your layout with properties like flex-grow, flex-shrink, align-self, grid-column, and grid-row. This allows for complex layouts where certain elements behave differently than others.

Clean CSS Output

Generate clean, optimized CSS code that you can copy and paste directly into your projects. The code is well-formatted and includes only the properties you've actually used, avoiding bloat in your stylesheets.

When to Use Flexbox vs. Grid

Use Flexbox When:

  • You need a layout in a single dimension (row OR column)
  • You want content to determine the size of elements
  • You're creating navigation menus or toolbars
  • You need to distribute space between items evenly
  • You're aligning items within a container

Use CSS Grid When:

  • You need a layout in two dimensions (rows AND columns)
  • You want the layout to determine the size and position of elements
  • You're creating a full-page layout or complex component
  • You need precise control over item placement
  • You're creating a layout with overlapping elements

How to Use the Flexbox & Grid Generator

  1. Choose between Flexbox or Grid layout mode
  2. Configure the container properties (direction, alignment, etc.)
  3. Add items to your layout
  4. Customize individual item properties if needed
  5. Preview your layout in real-time
  6. Copy the generated CSS code
  7. Implement the code in your project

Common Layout Patterns

  • Holy Grail Layout - A classic web layout with header, footer, main content, and two sidebars
  • Card Grid - A responsive grid of cards that reflow based on screen size
  • Sticky Footer - A layout where the footer stays at the bottom even with minimal content
  • Masonry Layout - A grid layout with items of varying heights, similar to Pinterest
  • Split Screen - A layout that divides the screen into two or more sections

Pro Tip

For the most flexible and responsive layouts, consider using a combination of Flexbox and Grid. Use Grid for the overall page layout and Flexbox for components within that layout. This approach leverages the strengths of both systems and creates highly adaptable designs.