CSS Flexbox & Grid Generator — Build Modern Layouts Visually

CSS layout has transformed over the past decade. Float-based layouts required hacky workarounds. Flexbox solved one-dimensional alignment. CSS Grid made complex two-dimensional layouts straightforward. Together they cover virtually every layout need.

Flexbox vs Grid — when to use each

Use Flexbox for:

• One-dimensional layouts (items in a row or a column)
• Navigation bars and toolbars
• Centering content vertically and horizontally
• Distributing items with flexible sizing along one axis
• Components where items need to grow or shrink based on content

Use Grid for:

• Two-dimensional layouts (controlling both rows and columns)
• Page-level layouts (header, sidebar, main, footer)
• Card grids and galleries
• Any design where elements need to align across both axes
• Complex overlapping or asymmetric layouts

The practical rule: Use Flexbox inside components, Grid for page structure. They complement each other — it's common to have a Grid page layout containing Flex components.

Essential Flexbox properties

Container

.container {
  display: flex;
  flex-direction: row;           /* row | column | row-reverse | column-reverse */
  flex-wrap: wrap;               /* nowrap | wrap | wrap-reverse */
  justify-content: space-between; /* main axis alignment */
  align-items: center;           /* cross axis alignment */
  gap: 16px;                     /* space between items (replaces margin hacks) */
}

Items

.item {
  flex: 1;           /* shorthand: flex-grow flex-shrink flex-basis */
  flex-grow: 1;      /* how much item grows relative to siblings */
  flex-shrink: 0;    /* prevent shrinking below flex-basis */
  flex-basis: 200px; /* starting size before grow/shrink applies */
  align-self: flex-start; /* override align-items for this item only */
}

Essential CSS Grid properties

Container

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  grid-template-rows: auto 1fr auto;     /* header, flexible main, footer */
  gap: 24px;
  justify-items: stretch; /* align items within their cells */
  align-items: start;
}

Responsive grid without media queries

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

This creates as many columns as fit while keeping each at least 200px wide — no media queries needed.

Item placement and spanning

.wide-item {
  grid-column: span 2; /* spans 2 columns */
  grid-row: span 2;    /* spans 2 rows */
}

.header {
  grid-column: 1 / -1; /* spans all columns */
}

Common layout patterns

Centering (the classic challenge, now trivial)

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

Holy Grail layout

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Card grid with auto-fill

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

Nav bar (logo left, links right)

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

Common mistakes

• Using Flexbox for grid-like layouts (use Grid instead)
• Forgetting min-width: 0 on flex children that contain text (causes overflow)
• Using gap in Flexbox and not accounting for wrap behavior
• Setting explicit row heights that break when content grows
• Overusing position: absolute when Grid placement would work better

How to generate CSS layouts free

1. Go to CSS Layout Generator
2. Switch between Flexbox and Grid modes
3. Adjust all properties using toggles and sliders
4. See a live colored preview update instantly
5. Load common layout presets (Holy Grail, Card Grid, Nav Bar, etc.)
6. Copy the generated CSS or download as a .css file