CSS Layout Systems Compared

CSS Layout Systems at a Glance

CSS gives you multiple layout systems, each built to solve a different problem. Picking the right one keeps your code clean and prevents fights with the browser.

Most modern layouts use Grid and Flexbox together. Float and Position serve specific niches — not general-purpose layout.

Grid vs Flexbox

Grid and Flexbox are the two modern layout engines. Understanding when each wins saves hours of debugging.

When Grid Wins

Use Grid when you need to control the overall structure — where things sit in both dimensions at once.

• You define both columns and rows simultaneously
• Items need to span multiple cells or align in a matrix
• The layout has named regions (sidebar, main, footer)
• You want auto-fill responsive behavior without media queries
• Content must align across rows and columns

.page-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 64px 1fr 48px;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
}

Grid controls the frame. Think of it as the architecture of the page.

When Flexbox Wins

Use Flexbox when you distribute space along a single axis — aligning items in a row or column.

• Items flow in one direction (horizontal nav, vertical sidebar menu)
• You need to distribute remaining space proportionally
• Content size determines layout, not the reverse
• You want easy centering of a single item
• Items should wrap based on their content width

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toolbar-spacer {
  flex: 1; /* pushes items after it to the right */
}

Flexbox controls the components. Think of it as the furniture inside the rooms Grid built.

Direct Comparison

The One-Question Test

Can you draw a line across your layout without crossing any item? If yes, Grid is the natural choice. If items form a single row or column with no clean cross-axis, Flexbox fits better.

Traditional Layout Methods

Float-Based Layouts

Floats were the backbone of CSS layout before Flexbox existed. Today, use them only for their original purpose — wrapping text around images:

.article-image {
  float: left;
  margin-right: 16px;
  margin-bottom: 8px;
}

Never use floats for page structure. They require clearfix hacks, cannot vertically center, and break easily at different screen sizes.

Positioned Layout

position: absolute and position: fixed remove elements from normal flow. Use them for overlays, modals, and sticky elements:

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

Position is not a layout system — it is for explicit placement. Do not build page structures with it.

Table and Inline-Block

display: table creates equal-height columns but has zero responsive capability. display: inline-block was the precursor to Flexbox — it suffers from whitespace gaps and lacks alignment controls. Both are obsolete for layout purposes.

Choosing the Right System

Follow this decision flow:

1. Is it tabular data? → Use <table> with semantic markup
2. Do you need both rows and columns? → Use CSS Grid
3. Is it one-directional content? → Use Flexbox
4. Does it need to overlay other content? → Use position
5. Does text need to wrap around it? → Use float

When in doubt, start with Flexbox for small components and Grid for page-level structure.

Combining Grid and Flexbox

The most powerful pattern is Grid for layout, Flexbox for components. Here are practical examples.

App Shell Pattern

Grid defines the page structure. Flexbox handles the internals of each area:

/* Grid defines the page structure */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  min-height: 100vh;
}

/* Flexbox handles the header internals */
.header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

/* Flexbox handles the sidebar menu */
.sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
}

Card Grid Pattern

Grid handles the card layout. Flexbox controls content inside each card:

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

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-footer {
  margin-top: auto; /* pushes footer to bottom of card */
}

The margin-top: auto trick ensures every card footer aligns at the same height, even when card content varies in length.

Subgrid for Aligned Children

When child grids need to align with parent tracks, use subgrid:

.parent-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 16px;
}

.child-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid; /* inherits parent columns */
}

Subgrid eliminates the need to repeat column definitions, keeping layouts DRY and visually aligned.

Try It Yourself

Build layouts interactively with our tools:

• CSS Grid Generator — Define columns, rows, gaps, and named areas visually
• Flexbox Generator — Adjust direction, alignment, wrapping, and spacing

Related Guides

• Flexbox Generator Guide — Visual walkthrough of building flex layouts with a generator tool
• CSS Flexbox Tutorial — Flex container and item properties, alignment, and wrapping
• CSS Grid Guide — Core grid concepts: columns, rows, units, and gaps