CSS Layout Techniques: The Complete Guide for 2026

Q: What is the best CSS layout method to use in 2026?

For most layouts in 2026, CSS Grid and Flexbox are the best choices. Use CSS Grid for two-dimensional layouts where you need to control both rows and columns simultaneously, such as page skeletons, dashboards, and card grids. Use Flexbox for one-dimensional layouts like navigation bars, button groups, toolbars, and arranging items along a single axis. Most production sites combine both: Grid for the outer page structure and Flexbox for component-level layout inside grid cells. Floats and table-based layouts are considered legacy techniques and should only be used for text wrapping around images.

Q: What is the difference between CSS Grid and Flexbox?

CSS Grid is a two-dimensional layout system that controls both columns and rows simultaneously. You define a grid structure and place items into specific cells or regions. Flexbox is a one-dimensional layout system that arranges items along a single axis (either a row or a column). Grid is structure-first: you define the layout, then place content into it. Flexbox is content-first: items determine the layout based on their size and flex properties. Use Grid for page layouts, card grids, and dashboards. Use Flexbox for navigation bars, centering content, and distributing space along one direction.

Q: How do I create a responsive layout without media queries?

Use CSS Grid with the repeat(auto-fill, minmax(min-size, 1fr)) pattern. For example, grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) creates a grid where the browser automatically calculates how many 300px-minimum columns fit in the container width, and distributes remaining space equally. As the viewport shrinks, columns drop to new rows automatically. For a bulletproof version that prevents overflow on very narrow screens, use minmax(min(100%, 300px), 1fr). Flexbox can also create responsive layouts with flex-wrap: wrap and appropriate flex-basis values on children.

Q: When should I use position: sticky vs position: fixed?

Use position: sticky when you want an element to scroll normally with the page until it reaches a threshold (defined by top, bottom, left, or right), then stick in place within its containing block. Common uses include sticky table headers and section headings. Use position: fixed when you want an element to stay in the same position relative to the viewport at all times, regardless of scrolling. Common uses include persistent navigation bars and floating action buttons. The key difference is that sticky elements are scoped to their parent container and stop sticking when the parent scrolls out of view, while fixed elements are always visible.

Q: What is CSS Subgrid and when should I use it?

CSS Subgrid allows a grid item that is also a grid container to inherit the track definitions (columns, rows, or both) from its parent grid. Instead of defining its own independent tracks, the child grid aligns its content to the parent grid lines. The most common use case is card grids where internal card elements like titles, descriptions, and buttons need to align horizontally across all cards in a row, regardless of content length. Without subgrid, a card with a long title pushes its description down, misaligning it with adjacent cards. With subgrid, all titles, descriptions, and buttons align perfectly. Subgrid is supported in all major browsers since late 2023.

February 12, 2026

CSS layout has evolved dramatically over the past decade. What once required float hacks, clearfixes, and table-based designs now has dedicated layout systems purpose-built for modern web development. In 2026, you have a full toolkit at your disposal: the display property, CSS positioning, Flexbox, Grid, multi-column layout, subgrid, and container queries. Each solves a different class of layout problem, and knowing when to use which is one of the most valuable skills a front-end developer can have.

This guide walks through every major CSS layout technique, explains what each one does, shows real code examples, and gives you a clear decision framework for choosing the right approach. Whether you are building a responsive card grid, a sticky sidebar layout, a dashboard with mixed-size widgets, or a simple centered content page, you will know exactly which technique to reach for.

⚙ Try it: Build layouts visually with our Flexbox Generator and CSS Grid Generator, or reference the quick-lookup tables in our Flexbox and Grid cheat sheets.

The Display Property: Foundation of Every Layout

Every CSS layout begins with the display property. It determines how an element generates boxes and how its children participate in layout. Understanding the core display values is essential before reaching for any layout system.

block

Block elements take up the full width of their parent, stack vertically, and respect width, height, margin, and padding on all sides. Divs, paragraphs, headings, and sections are block by default.

.block-element {
    display: block;
    width: 80%;           /* Constrains width */
    margin: 0 auto;       /* Centers horizontally */
    padding: 1.5rem;
}

inline

Inline elements flow within text, only taking up as much width as their content needs. They do not accept width or height, and vertical margin and padding have no effect on surrounding layout. Spans, anchors, and strong tags are inline by default.

inline-block

A hybrid: the element flows inline like text, but you can set width, height, and vertical margin/padding. This was the go-to layout hack before Flexbox and Grid existed.

.inline-block-item {
    display: inline-block;
    width: 200px;
    height: 150px;
    vertical-align: top;     /* Align tops of adjacent items */
    margin-right: 1rem;
}

/* Caveat: inline-block items have whitespace gaps between them
   from HTML formatting. Flexbox and Grid eliminate this problem. */

flex and grid

These activate the Flexbox and Grid layout systems on the container. Children become flex items or grid items, gaining access to alignment, distribution, and placement properties that no other display value provides. We cover these in depth in their own sections below.

none

Removes the element from the layout entirely. It takes up no space and is not rendered. Use it for toggling visibility. If you want the element to be invisible but still occupy space, use visibility: hidden instead.

/* Toggle element visibility */
.hidden { display: none; }
.invisible { visibility: hidden; }   /* Still takes up space */

/* Common pattern: show/hide based on screen size */
.mobile-nav  { display: none; }
@media (max-width: 768px) {
    .desktop-nav { display: none; }
    .mobile-nav  { display: block; }
}

CSS Positioning

The position property controls how an element is placed relative to its normal position in the document flow. There are five values, each with distinct behavior.

static (default)

Elements are positioned in normal document flow. The top, right, bottom, left, and z-index properties have no effect. This is the default for every element.

relative

The element stays in normal flow but can be offset from its original position using top, right, bottom, and left. The space it originally occupied is preserved. Most commonly used as a positioning context for absolutely positioned children.

.parent {
    position: relative;       /* Creates positioning context */
}

.badge {
    position: absolute;       /* Positioned relative to .parent */
    top: -8px;
    right: -8px;
}

absolute

The element is removed from normal flow and positioned relative to its nearest positioned ancestor (any ancestor with position other than static). If no positioned ancestor exists, it positions relative to the initial containing block (the viewport).

.dropdown-menu {
    position: absolute;
    top: 100%;              /* Directly below the trigger */
    left: 0;
    width: 250px;
    background: #1a1a2e;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 100;
}

fixed

The element is removed from flow and positioned relative to the viewport. It stays in place even when the page scrolls. Use it for persistent navigation bars, floating action buttons, and cookie banners.

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #0f0f23;
    z-index: 1000;
}

/* Add padding to body so content is not hidden behind the header */
body { padding-top: 60px; }

sticky

A hybrid of relative and fixed. The element scrolls normally until it reaches a specified threshold (set with top, bottom, etc.), then sticks in place. When its parent container scrolls out of view, the sticky element goes with it.

.sticky-sidebar {
    position: sticky;
    top: 1rem;             /* Sticks 1rem from the top of the viewport */
    align-self: start;     /* Important: prevents stretching in flex/grid */
}

/* Sticky table headers */
thead th {
    position: sticky;
    top: 0;
    background: #1a1d27;
    z-index: 10;
}

Sticky positioning requires the element to have a scrollable ancestor with enough content to actually scroll. If the parent has overflow: hidden or the element fills its container exactly, sticky will not work.

Normal Flow and Document Flow

Before applying any layout technique, every element participates in normal flow (also called document flow). Block elements stack vertically. Inline elements flow left to right within a line, wrapping to the next line when they run out of space. This is the default behavior before you apply any display, position, float, or layout property.

Understanding normal flow matters because every layout technique either works within it (relative positioning), modifies it (floats, flex, grid), or removes elements from it entirely (absolute, fixed positioning). When debugging layout issues, the first question to ask is: "Is this element in normal flow, or has something taken it out?"

CSS Flexbox: One-Dimensional Layout

Flexbox arranges items along a single axis, either a row (horizontal) or a column (vertical). You define a flex container, and its direct children become flex items that can grow, shrink, and distribute space along that axis.

.flex-container {
    display: flex;
    gap: 1rem;
}

/* Direction */
.row    { flex-direction: row; }        /* Default: left to right */
.column { flex-direction: column; }     /* Top to bottom */

/* Alignment along main axis */
.flex-container {
    justify-content: flex-start;       /* Pack to start (default) */
    justify-content: center;           /* Center items */
    justify-content: space-between;    /* Equal space between items */
    justify-content: space-evenly;     /* Equal space around items */
}

/* Alignment along cross axis */
.flex-container {
    align-items: stretch;              /* Fill height (default) */
    align-items: center;               /* Center vertically */
    align-items: flex-start;           /* Align to top */
}

Flex Item Properties

.item {
    flex-grow: 1;        /* Absorb available space */
    flex-shrink: 1;      /* Shrink if necessary (default) */
    flex-basis: 200px;   /* Starting size before grow/shrink */
}

/* Shorthand */
.item { flex: 1; }                /* Grow equally, basis 0 */
.item { flex: 0 0 250px; }       /* Fixed: no grow, no shrink, 250px */
.item { flex: 1 1 300px; }       /* Flexible: grow, shrink, start at 300px */

Common Flexbox Patterns

/* Navbar: logo left, links right */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
    height: 60px;
}

/* Center anything (the shortest centering code in CSS) */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Push footer to bottom with flex column */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.page main { flex: 1; }    /* Main content grows to fill space */
.page footer { flex: none; } /* Footer stays at its natural size */

📚 Deep dive: For complete coverage of every Flexbox property with visual examples, read our CSS Flexbox Complete Guide.

CSS Grid: Two-Dimensional Layout

CSS Grid is the most powerful layout system in CSS. It controls both columns and rows simultaneously, letting you define a structure and place items precisely into that structure. Where Flexbox is content-driven (items determine the layout), Grid is structure-driven (you define the layout, then place content).

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);    /* 3 equal columns */
    grid-template-rows: auto 1fr auto;        /* Header, content, footer */
    gap: 1.5rem;
}

/* Place items explicitly */
.header { grid-column: 1 / -1; }             /* Span all columns */
.sidebar { grid-column: 1; grid-row: 2; }
.content { grid-column: 2 / -1; grid-row: 2; }
.footer { grid-column: 1 / -1; }

Named Grid Areas

The most readable way to define a Grid layout. Each string represents a row, and each word represents a cell:

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

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

/* Rearrange for mobile with one line change */
@media (max-width: 768px) {
    .page {
        grid-template-areas:
            "header"
            "content"
            "sidebar"
            "footer";
        grid-template-columns: 1fr;
    }
}

Responsive Grid Without Media Queries

/* The single most useful CSS Grid pattern */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Bulletproof version that prevents overflow on narrow screens */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 1.5rem;
}

📚 Deep dive: For complete coverage of Grid containers, items, template areas, auto-fill vs auto-fit, subgrid, and advanced patterns, read our CSS Grid Complete Guide.

Float-Based Layouts

Floats were the primary layout mechanism for over a decade before Flexbox and Grid arrived. A floated element is taken out of normal flow and shifted to the left or right of its container, allowing text and inline elements to wrap around it.

/* Text wrapping around an image (the original use case) */
.article-image {
    float: left;
    width: 300px;
    margin: 0 1.5rem 1rem 0;
    border-radius: 8px;
}

/* Clear floats (the classic clearfix) */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

Modern Use Cases for Floats

In 2026, floats have exactly one legitimate use case: wrapping text around an image or pull quote. For every other layout task, Flexbox and Grid are superior. Do not use floats for multi-column page layouts, card grids, or navigation bars.

/* Pull quote with text wrapping */
.pull-quote {
    float: right;
    width: 40%;
    margin: 0 0 1rem 1.5rem;
    padding: 1rem;
    border-left: 3px solid #3b82f6;
    font-size: 1.1rem;
    font-style: italic;
    color: #9ca3af;
}

/* Shape-outside: modern float enhancement */
.circle-image {
    float: left;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    shape-outside: circle(50%);    /* Text wraps along the circle */
    margin: 0 1.5rem 1rem 0;
}

Multi-Column Layout

The CSS multi-column layout module splits content into multiple newspaper-style columns. It is ideal for long text content, lists, and any situation where you want content to flow across columns like a printed publication.

/* Fixed number of columns */
.three-columns {
    column-count: 3;
    column-gap: 2rem;
    column-rule: 1px solid rgba(255,255,255,0.1);   /* Divider line */
}

/* Responsive columns based on minimum width */
.auto-columns {
    columns: 250px;         /* As many 250px columns as fit */
    column-gap: 2rem;
}

/* Prevent elements from breaking across columns */
.card {
    break-inside: avoid;
    margin-bottom: 1rem;
}

Multi-column layout is underused. It works exceptionally well for lists of links, glossaries, feature lists, and any content where you want items to flow naturally into available columns without the explicit structure of Grid.

CSS Subgrid

Subgrid allows a grid item that is also a grid container to inherit the track definitions from its parent grid. Instead of defining its own independent tracks, the child aligns its content to the parent grid lines.

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

.card {
    display: grid;
    grid-template-rows: subgrid;   /* Inherit parent row tracks */
    grid-row: span 3;              /* Card occupies 3 sub-rows */
    gap: 0;
    background: #1a1a2e;
    border-radius: 8px;
    overflow: hidden;
}

/* Row 1: title, Row 2: description, Row 3: action button */
.card .title       { padding: 1rem 1rem 0.5rem; font-weight: 600; }
.card .description { padding: 0 1rem; color: #9ca3af; }
.card .actions     { padding: 1rem; align-self: end; }

/*  Without subgrid, card content misaligns:
    +--------------+  +--------------+
    | Short Title  |  | A Much Longer|
    +--------------+  | Title Here   |
    | Description  |  +--------------+
    | [Button]     |  | Description  |
    +--------------+  | [Button]     |
                      +--------------+

    With subgrid, everything aligns across cards:
    +--------------+  +--------------+
    | Short Title  |  | A Much Longer|
    |              |  | Title Here   |
    +--------------+  +--------------+  <-- aligned!
    | Description  |  | Description  |
    +--------------+  +--------------+  <-- aligned!
    | [Button]     |  | [Button]     |
    +--------------+  +--------------+  */

Subgrid is supported in all major browsers since late 2023 (Chrome 117+, Firefox 71+, Safari 16+, Edge 117+). It is the definitive solution to the "misaligned card content" problem that developers have struggled with for years.

Responsive Layout Patterns

Mobile-First Approach

Start with the mobile layout as your base CSS, then use min-width media queries to add complexity for larger screens. This approach results in simpler CSS because the mobile layout is usually the simplest (single column), and you progressively enhance for wider viewports.

/* Base: mobile (single column) */
.layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
}

/* Tablet: two columns */
@media (min-width: 768px) {
    .layout {
        grid-template-columns: 250px 1fr;
        gap: 2rem;
        padding: 2rem;
    }
}

/* Desktop: three columns */
@media (min-width: 1200px) {
    .layout {
        grid-template-columns: 250px 1fr 300px;
        max-width: 1400px;
        margin: 0 auto;
    }
}

Common Breakpoints

/* Practical breakpoint system */
/* Small phones:    0 - 479px    (base styles, no query needed) */
/* Large phones:  480px - 767px  */
/* Tablets:       768px - 1023px */
/* Laptops:      1024px - 1279px */
/* Desktops:     1280px+         */

@media (min-width: 480px)  { /* Large phone adjustments */ }
@media (min-width: 768px)  { /* Tablet layout */ }
@media (min-width: 1024px) { /* Laptop layout */ }
@media (min-width: 1280px) { /* Desktop layout */ }

Container Queries: Component-Level Responsiveness

Container queries let a component adapt its layout based on the size of its container rather than the viewport. This means the same component can display differently when placed in a narrow sidebar versus a wide main content area, without any JavaScript.

.card-container {
    container-type: inline-size;
}

/* Default: stacked layout */
.card { padding: 1rem; }
.card img { width: 100%; }

/* When container is wide enough: horizontal layout */
@container (min-width: 500px) {
    .card {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: 1rem;
    }
}

Layout Comparison: When to Use What

Layout Need	Best Technique	Why
Full page layout (header, sidebar, content, footer)	CSS Grid	Two-dimensional control with named areas
Responsive card grid	CSS Grid	auto-fill + minmax for zero-query responsiveness
Navigation bar	Flexbox	One-dimensional row with flexible spacing
Centering content	Grid or Flexbox	Grid: `place-items: center`. Flex: `justify-content + align-items`
Dashboard with mixed-size widgets	CSS Grid	Items span multiple rows and columns
Text wrapping around an image	Float	The only layout task floats are still best for
Newspaper-style text columns	Multi-column	Content flows naturally across columns
Sticky header or sidebar	position: sticky	Sticks within its scroll container
Aligning card content across a row	CSS Subgrid	Child tracks inherit parent grid alignment
Component adapts to its container width	Container queries	Component-level responsiveness, not viewport-based
Button group or toolbar	Flexbox	Inline items in a single row with gap
Form with label/input pairs	CSS Grid	Two-column alignment with consistent widths

📚 Related: For a detailed head-to-head comparison with examples for every scenario, read our CSS Flexbox vs Grid: When to Use Which guide.

Common Layout Patterns

The Holy Grail Layout

The classic layout: header across the top, three columns in the middle (nav, content, sidebar), and a footer across the bottom.

.holy-grail {
    display: grid;
    grid-template-areas:
        "header  header  header"
        "nav     main    aside"
        "footer  footer  footer";
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    gap: 1rem;
}

.header  { grid-area: header; }
.nav     { grid-area: nav; }
.main    { grid-area: main; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

@media (max-width: 768px) {
    .holy-grail {
        grid-template-areas: "header" "main" "nav" "aside" "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}

Sidebar Layout with Sticky Sidebar

.sidebar-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
    align-items: start;      /* Prevents sidebar from stretching */
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.sidebar {
    position: sticky;
    top: 1rem;
}

@media (max-width: 768px) {
    .sidebar-layout {
        grid-template-columns: 1fr;
    }
    .sidebar {
        position: static;    /* No sticky on mobile */
    }
}

Responsive Card Grid

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}

.card {
    background: #1a1a2e;
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;    /* Flexbox inside each grid cell */
}

.card .title { font-size: 1.1rem; font-weight: 600; }
.card .body  { flex: 1; color: #9ca3af; margin: 0.75rem 0; }
.card .action { margin-top: auto; }   /* Push button to bottom */

Sticky Footer (Content Does Not Fill the Page)

/* Grid approach */
body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}
/* header = row 1 (auto), main = row 2 (fills space), footer = row 3 (auto) */

/* Flexbox approach */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main { flex: 1; }
/* Main grows to push footer down */

Full-Bleed with Centered Content

.page {
    display: grid;
    grid-template-columns:
        1fr
        min(70ch, 100% - 4rem)
        1fr;
}

.page > * {
    grid-column: 2;           /* All content in the center column */
}

.full-bleed {
    grid-column: 1 / -1;     /* Break out to full width */
    width: 100%;
}

/* Use this for blog posts where most content is centered,
   but some elements (hero images, code blocks, tables)
   need to stretch edge-to-edge. */

Performance Considerations

Modern CSS layout is fast. Browsers have optimized Grid and Flexbox implementations extensively. However, there are a few things to keep in mind for complex or large-scale layouts:

Avoid deep nesting — A flat grid with explicit placement outperforms nested grids inside grids inside grids. Use spanning and named areas instead of nesting.
auto-fill with minmax() triggers column recalculation on every resize. For grids with hundreds of items, add content-visibility: auto for off-screen items to reduce rendering cost.
grid-auto-flow: dense scans all previous cells for gaps, scaling with item count. Fine for tens of items; measurably slower for 500+ items.
Subgrid overhead is minimal for typical card grids but increases with deep nesting. Keep subgrid to one level deep.
position: fixed creates a new stacking context and triggers compositing. Avoid applying it to elements with complex children or heavy paint operations.
Container queries add a resize observer under the hood. On pages with many container-queried components, this is negligible, but worth noting for extreme cases.
Use will-change sparingly — it promotes elements to their own compositor layer, consuming GPU memory. Only apply it to elements you are actively animating.

For the vast majority of real-world layouts, performance is not a concern. Write readable, maintainable CSS first. Optimize only when profiling reveals a specific bottleneck.

Frequently Asked Questions

What is the best CSS layout method to use in 2026?

For most layouts, CSS Grid and Flexbox are the best choices. Use Grid for two-dimensional layouts where you need to control both rows and columns (page skeletons, dashboards, card grids). Use Flexbox for one-dimensional layouts like navigation bars, button groups, and toolbars. Most production sites combine both: Grid for the outer page structure and Flexbox for component-level layout inside grid cells. Floats and table-based layouts are legacy techniques that should only be used for text wrapping around images.

What is the difference between CSS Grid and Flexbox?

CSS Grid is two-dimensional (controls columns and rows simultaneously). Flexbox is one-dimensional (arranges items along a single axis). Grid is structure-first: you define the layout, then place content into it. Flexbox is content-first: items determine the layout based on their size and flex properties. Use Grid for page layouts, card grids, and dashboards. Use Flexbox for navbars, centering content, and distributing space along one direction.

How do I create a responsive layout without media queries?

Use CSS Grid with repeat(auto-fill, minmax(min-size, 1fr)). For example, grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) creates a grid where the browser automatically calculates how many 300px-minimum columns fit. As the viewport shrinks, columns drop to new rows automatically. For a bulletproof version that prevents overflow on very narrow screens, use minmax(min(100%, 300px), 1fr).

When should I use position: sticky vs position: fixed?

Use position: sticky when you want an element to scroll normally until it reaches a threshold, then stick in place within its containing block (sticky table headers, section headings). Use position: fixed when you want an element to stay in the same position relative to the viewport at all times (persistent nav bars, floating action buttons). The key difference: sticky elements stop sticking when their parent scrolls out of view, while fixed elements are always visible.

What is CSS Subgrid and when should I use it?

CSS Subgrid allows a nested grid container to inherit track definitions from its parent grid. The most common use case is card grids where internal elements (titles, descriptions, buttons) need to align across all cards in a row, regardless of content length. Without subgrid, a card with a long title pushes its description down, misaligning it with adjacent cards. With subgrid, everything aligns perfectly. Supported in all major browsers since late 2023.