Should I use CSS Grid or Flexbox?

Use CSS Grid for two-dimensional layouts where you need control over both rows and columns simultaneously (page layouts, card grids, dashboards). Use Flexbox for one-dimensional layouts where items flow in a single row or column (navigation bars, form controls, centering content). They are complementary, not competing. Most layouts use both: Grid for the overall page structure and Flexbox for component-level alignment.

What are CSS Container Queries?

Container Queries let you style elements based on the size of their parent container rather than the viewport. Unlike media queries (which respond to screen width), container queries enable truly reusable components that adapt to whatever space they occupy. For example, a card component can switch from horizontal to vertical layout based on its container width, whether that container is a sidebar, main content area, or modal.

What is CSS Subgrid and when should I use it?

Subgrid allows a grid item's children to participate in the parent grid's track sizing. Without subgrid, nested grids are independent and cannot align with the parent grid's columns or rows. Use subgrid when you need consistent alignment across nested components, like card grids where every card's title, image, and description should align with the same row tracks regardless of content length.

Is CSS float layout still used?

Float-based layouts are effectively obsolete for page layout. CSS Grid and Flexbox handle every layout pattern that floats were used for, with better control and fewer hacks. Floats still have legitimate uses for wrapping text around images (their original purpose) and some legacy browser support scenarios, but for new projects there is no reason to use float for layout.

How do I create a responsive layout without media queries?

Use CSS Grid's auto-fit or auto-fill with minmax() for intrinsically responsive grids: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). This creates as many columns as fit, each at least 250px wide, without a single media query. Combine with clamp() for fluid typography and spacing: font-size: clamp(1rem, 2.5vw, 2rem). Container queries add component-level responsiveness.

CSS Layout Techniques in 2026

CSS layout has never been more powerful or more confusing. Between Grid, Flexbox, Container Queries, Subgrid, and a dozen other features, choosing the right approach for each layout problem requires understanding what each tool does best. The good news: the days of float hacks and clearfix are over. The modern CSS layout toolkit is expressive, predictable, and well-supported across browsers.

This guide covers the major layout methods available in 2026, when to use each one, and how they work together. Experiment with layouts in real time using our CSS Grid Generator and Flexbox Playground.

CSS Grid: The Two-Dimensional Layout Engine

CSS Grid is designed for two-dimensional layouts where you control both rows and columns simultaneously. It is the right tool for page-level layout, card grids, dashboards, and any design where items need to align on both axes.

Key Grid Concepts

Explicit tracks: Define columns and rows with grid-template-columns and grid-template-rows. Use fr units for flexible proportions: grid-template-columns: 1fr 2fr 1fr creates a 3-column layout where the middle is twice as wide.
Implicit tracks: Rows created automatically when content overflows the explicit grid. Control their size with grid-auto-rows.
Gap: The gap property creates consistent spacing between grid items without margin hacks. gap: 1rem 2rem sets row and column gaps separately.
Named areas: grid-template-areas lets you define layout regions by name, making complex layouts readable and maintainable.
Auto-placement: repeat(auto-fit, minmax(250px, 1fr)) creates responsive grids without media queries. Items wrap to new rows automatically when space is insufficient.

/* Responsive card grid - no media queries needed */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Page layout with named areas */
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
}

Our CSS Grid Generator lets you visually design grid layouts and export production-ready CSS.

CSS Flexbox: The One-Dimensional Layout Model

Flexbox excels at distributing space along a single axis - either a row or a column. It is the right tool for navigation bars, form layouts, centering content, and any pattern where items need to share space in one direction.

Key Flexbox Concepts

Main axis vs. cross axis: flex-direction sets the main axis (row or column). Items are distributed along the main axis and aligned along the cross axis.
flex shorthand: flex: 1 means the item grows to fill available space. flex: 0 0 200px means fixed at 200px with no growing or shrinking.
justify-content: Distributes space along the main axis. space-between pushes items to the edges; center groups them in the middle.
align-items: Aligns items along the cross axis. center is the most common value and solves the classic vertical centering problem.
flex-wrap: wrap allows items to flow to the next line when they exceed container width.

/* Center anything vertically and horizontally */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Navigation bar with logo left, links right */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
}

Try different Flexbox configurations in our Flexbox Playground to see how each property affects layout.

Container Queries: Component-Level Responsiveness

Container Queries are the most significant addition to CSS layout since Grid. They let components respond to the size of their parent container rather than the viewport, enabling truly reusable components that adapt to any context.

/* Define a containment context */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* Style based on container width, not viewport */
@container card (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

This means the same card component automatically switches between vertical and horizontal layout depending on where it is placed - in a sidebar (narrow), main content (medium), or full-width hero (wide) - without any JavaScript or context-specific CSS classes.

Subgrid: Nested Alignment

CSS Subgrid solves a long-standing problem: aligning nested grid items with the parent grid's tracks. Without subgrid, each nested grid is independent and cannot reference the parent's column or row sizes.

/* Parent grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Card uses parent's row tracks for alignment */
.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid; /* inherits parent's row tracks */
}

/* Now title, content, and footer align across all cards */

Subgrid is especially useful for card grids where you want every card's title, description, and call-to-action button to align perfectly regardless of content length.

Grid vs. Flexbox: When to Use Each

Use Case	Best Tool	Why
Page layout (header, sidebar, main, footer)	Grid	Named areas, 2D control
Card grids	Grid	auto-fit/minmax for responsiveness
Navigation bar	Flexbox	Single-axis distribution
Centering content	Flexbox	2 lines: display:flex + place-items
Form layout	Grid	Label-input alignment across rows
Toolbar/button group	Flexbox	Inline items with gap
Dashboard with mixed sizes	Grid	Spanning rows/columns

In practice, most layouts combine both. Use Grid for the overall page structure and Flexbox for individual component internals.

Modern CSS Techniques Worth Knowing

clamp() for fluid sizing: font-size: clamp(1rem, 2.5vw, 2rem) creates responsive typography without media queries. Works for margins, padding, and gaps too.
aspect-ratio: aspect-ratio: 16/9 maintains proportions without the old padding-top hack. Perfect for video containers, images, and card thumbnails.
:has() selector: Parent selection based on children. .card:has(img) styles cards that contain images differently from text-only cards.
Logical properties: margin-inline, padding-block, inset-inline-start replace directional properties for better internationalization support.
Scroll-driven animations: CSS-only scroll-linked effects without JavaScript. Progress bars, parallax, and reveal animations tied to scroll position.

Build Your Layouts

Our CSS Grid Generator lets you visually design grid layouts with drag-and-drop, then copy production-ready code. The Flexbox Playground shows how every Flexbox property affects your layout in real time. Both tools run 100% in your browser.

Related Tools

Frequently Asked Questions

Use CSS Grid for two-dimensional layouts (page layouts, card grids, dashboards). Use Flexbox for one-dimensional layouts (nav bars, centering, form controls). They are complementary. Most layouts use Grid for page structure and Flexbox for component internals.

Container Queries style elements based on parent container size rather than viewport. They enable reusable components that adapt to whatever space they occupy. A card can switch from horizontal to vertical layout based on its container width, whether in a sidebar, main area, or modal.

Subgrid lets nested grid items align with the parent grid's tracks. Use it when you need consistent alignment across nested components, like card grids where every card's title, image, and description should align at the same row tracks regardless of content length.

Float-based layouts are effectively obsolete. Grid and Flexbox handle every layout pattern floats were used for with better control. Floats still work for wrapping text around images (their original purpose) but should not be used for page layout in new projects.

Use CSS Grid's auto-fit with minmax(): grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). Combine with clamp() for fluid typography and spacing. Container queries add component-level responsiveness without viewport-based media queries.

CSS Layout Techniques in 2026: Grid, Flexbox & Beyond