Layout Patterns

Sidebar + main

A fixed-width column beside flexible main content — the classic docs/dashboard layout. Flexbox makes it one line: a fixed flex-basis on the side, flex: 1 on the main.

HTML

<div class="layout">
  <aside class="sidebar">Sidebar<br>(nav / filters)</aside>
  <main class="main">Main content area — grows to fill the remaining space.</main>
</div>

CSS

.layout { display: flex; gap: 16px; }
.sidebar { flex: 0 0 220px; }   /* fixed width */
.main    { flex: 1; }           /* takes the rest */

@media (max-width: 600px) {
  .layout { flex-direction: column; }  /* stack on phones */
}

A readable content column

The primary <main> region. Cap its width and center it so lines stay a comfortable length (~50–75 characters) instead of stretching edge to edge.

HTML

<main class="content">
  <h1>Article title</h1>
  <p>Capping the width keeps text easy to read — long lines are hard for the eye to track back to the start.</p>
</main>

CSS

.content {
  max-width: 70ch;   /* ~70 characters per line */
  margin: 0 auto;    /* center horizontally       */
  padding: 0 20px;   /* breathing room on phones   */
}

Two equal halves

A 50/50 layout — great for a visual on one side and a form or copy on the other. A two-column grid does it; collapse to one column on small screens.

HTML

<section class="split">
  <div class="left">Visual / image</div>
  <div class="right">Text / form</div>
</section>

CSS

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* two equal halves */
  min-height: 100vh;
}
@media (max-width: 600px) {
  .split { grid-template-columns: 1fr; }  /* stack */
}

Separate blocks of content — five ways

A divider signals “new section.” Here are five common styles, from a plain hairline to a labeled or gradient divider — pick whichever fits the page.

HTML

<div class="block">Section one</div>
<hr class="divider">                       <!-- 1. hairline -->
<div class="block">After a hairline rule</div>
<div class="divider-accent"></div>        <!-- 2. accent bar -->
<div class="block">After a centered accent bar</div>
<div class="label-div">Or</div>           <!-- 3. labeled -->
<div class="block">After a labeled divider</div>
<div class="icon-div"><i class="star"></i></div>  <!-- 4. icon -->
<div class="block">After an icon divider</div>
<hr class="grad-div">                      <!-- 5. gradient -->
<div class="block">After a gradient line</div>

CSS

/* content block between dividers */
.block { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
         padding: 14px; text-align: center; }

/* 1. hairline */
.divider { border: none; border-top: 1px solid #e5e7eb; margin: 48px 0; }

/* 2. centered accent bar */
.divider-accent { width: 56px; height: 4px; background: #38bdf8; margin: 48px auto; }

/* 3. labeled ("Or") — lines flank the text */
.label-div { display: flex; align-items: center; gap: 12px; }
.label-div::before, .label-div::after { content: ""; flex: 1; height: 1px; background: #e5e7eb; }

/* 4. icon divider — short lines flank an icon */
.icon-div { display: flex; align-items: center; justify-content: center; gap: 10px; }
.icon-div::before, .icon-div::after { content: ""; width: 60px; height: 1px; background: #e5e7eb; }

/* 5. gradient line */
.grad-div { height: 3px; border: none;
            background: linear-gradient(90deg, transparent, #38bdf8, transparent); }

Pinterest-style columns

Items of different heights pack into columns with no row gaps. Pure CSS columns handles it — just stop cards from splitting across a column.

HTML

<div class="masonry">
  <div class="item">Card 1</div>
  <div class="item">Card 2</div>
  <div class="item">Card 3</div>
  <div class="item">Card 4</div>
  <div class="item">Card 5</div>
  <div class="item">Card 6</div>
</div>

CSS

.masonry {
  columns: 3 200px;     /* 3 columns, min 200px each */
  column-gap: 16px;
}
.masonry .item {
  break-inside: avoid;  /* keep a card in one column */
  margin-bottom: 16px;
}

A header that stays on top

Pin the header to the top edge so navigation is always reachable. Scroll inside the box to see it hold its place.

HTML

<header class="site-header">Sticky header</header>
<main>
  Scroll this box…<br><br>
  …the header above stays pinned…<br><br>
  …while the content moves…<br><br>
  …and keeps going.
</main>

CSS

.site-header {
  position: sticky;
  top: 0;            /* pin to the top      */
  z-index: 10;       /* sit above content   */
  background: #fff;  /* opaque background   */
}

A sidebar that follows you

Keep a sidebar (like a table of contents) visible while the main content scrolls past it. The key is position: sticky plus align-self: start so it doesn't stretch.

HTML

<div class="layout">
  <aside class="sidebar">Sticky nav</aside>
  <main class="main">
    Long content…<br><br>
    scroll the box…<br><br>
    …the sidebar stays put…<br><br>
    …until you reach the end…<br><br>
    …keep going…<br><br>
    …almost there.
  </main>
</div>

CSS

.layout  { display: flex; gap: 24px; }
.sidebar {
  position: sticky;
  top: 16px;          /* sticks 16px from the top */
  align-self: start;  /* needed so it won't stretch */
}
.main { flex: 1; }

Cap and center your content

A container constrains content to a comfortable max width and centers it, with side padding so it never touches the screen edge. Almost every section sits inside one.

HTML

<div class="container">
  <div class="inner">.container — max-width, centered</div>
</div>

CSS

.container {
  max-width: 1100px;   /* stop it getting too wide   */
  margin: 0 auto;      /* center horizontally        */
  padding: 0 24px;     /* breathing room on the sides */
}
.inner {
  max-width: 240px; margin: 0 auto;   /* capped + centered */
  background: #fff; border: 1px dashed #94a3b8; border-radius: 8px;
  padding: 20px; text-align: center;
}

A grid of features with icon, title, and text

The classic marketing “features” block — a responsive grid of cards, each with an icon, a short heading, and a sentence. auto-fit + minmax() makes the columns reflow on any screen with no media queries.

HTML

<div class="features">
  <div class="feature">
    <div class="icon">⚡</div>
    <h3>Fast</h3>
    <p>Loads in milliseconds on any device, anywhere.</p>
  </div>
  <div class="feature">
    <div class="icon">🔒</div>
    <h3>Secure</h3>
    <p>Encrypted by default so your data stays yours.</p>
  </div>
  <div class="feature">
    <div class="icon">📱</div>
    <h3>Responsive</h3>
    <p>Looks great from phone to widescreen.</p>
  </div>
</div>

CSS — the self-adjusting grid

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));  /* reflows itself */
  gap: 16px;
}
.feature { border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; text-align: center; }
.feature .icon { width: 48px; height: 48px; border-radius: 12px;
                 background: #e0f2fe; color: #0284c7;
                 display: grid; place-items: center; font-size: 1.5rem; margin: 0 auto 12px; }

The whole thing as one file

Several patterns above — a sticky header, a sidebar beside a capped main column, and a self-adjusting feature grid — combined into one complete HTML file. Copy it into a new file called index.html, open it in a browser, and it just works — no libraries, no build step. Here's the live result, then the full code.

Live preview

Complete HTML — copy this whole file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Layout Patterns Demo</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1f2433; background: #f6f7fb; }

    /* ===== Sticky header ===== */
    .site-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 24px; background: #0b1a33; color: #fff;
      position: sticky; top: 0; z-index: 100;   /* pinned, above content */
    }
    .site-header .logo { font-weight: 800; font-size: 1.15rem; }
    .site-header nav a { color: #cbd5e1; text-decoration: none; margin-left: 20px; font-size: .92rem; }
    .site-header nav a:hover { color: #fff; }

    /* ===== Container: cap + center ===== */
    .container { max-width: 1000px; margin: 0 auto; padding: 24px; }

    /* ===== Sidebar + main ===== */
    .layout { display: flex; gap: 24px; align-items: flex-start; }
    .sidebar {
      flex: 0 0 200px;                /* fixed width */
      position: sticky; top: 78px;    /* follows you as you scroll */
      align-self: flex-start;         /* don't stretch */
      background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 18px;
    }
    .sidebar h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #64748b; margin-bottom: 10px; }
    .sidebar a { display: block; color: #334155; text-decoration: none; font-size: .9rem; padding: 6px 0; }
    .sidebar a:hover { color: #2563eb; }

    .main { flex: 1; max-width: 70ch; }   /* readable line length */
    .main h1 { font-size: 1.9rem; margin-bottom: 12px; }
    .main p { color: #475569; margin-bottom: 14px; }

    /* ===== Self-adjusting feature grid ===== */
    .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-top: 8px; }
    .feature { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; text-align: center; }
    .feature .icon { width: 48px; height: 48px; border-radius: 12px; background: #e0f2fe; color: #0284c7; display: grid; place-items: center; font-size: 1.4rem; margin: 0 auto 12px; }
    .feature h4 { color: #111; font-size: 1rem; margin-bottom: 6px; }
    .feature p { color: #6b7280; font-size: .84rem; margin: 0; }

    footer { text-align: center; padding: 28px; color: #94a3b8; font-size: .82rem; }

    /* ===== Stack on small screens ===== */
    @media (max-width: 640px) {
      .layout { flex-direction: column; }
      .sidebar { position: static; width: 100%; flex-basis: auto; }
    }
  </style>
</head>
<body>

  <header class="site-header">
    <span class="logo">Brandr</span>
    <nav>
      <a href="#">Docs</a>
      <a href="#">Guides</a>
      <a href="#">About</a>
    </nav>
  </header>

  <div class="container">
    <div class="layout">

      <aside class="sidebar">
        <h3>On this page</h3>
        <a href="#">Overview</a>
        <a href="#">Features</a>
        <a href="#">Pricing</a>
        <a href="#">Support</a>
      </aside>

      <main class="main">
        <h1>Layout patterns in one page</h1>
        <p>A sticky header rides the top of the window. A sticky sidebar sits beside this capped, centered content column — scroll and watch it follow. Below, a feature grid reflows itself with no media queries.</p>
        <p>Resize the window narrow and the sidebar drops below the content, the grid collapses to one column, and everything stays readable.</p>

        <div class="features">
          <div class="feature"><div class="icon">&#9889;</div><h4>Fast</h4><p>Loads in milliseconds on any device.</p></div>
          <div class="feature"><div class="icon">&#128274;</div><h4>Secure</h4><p>Encrypted by default so your data stays yours.</p></div>
          <div class="feature"><div class="icon">&#128241;</div><h4>Responsive</h4><p>Looks great from phone to widescreen.</p></div>
        </div>

        <p style="margin-top:20px;">Keep scrolling — there's plenty of room here so you can see the sticky header and sidebar hold their place while the page moves.</p>
        <p style="height:600px;">Lots of space to scroll…</p>
      </main>

    </div>
  </div>

  <footer>&copy; 2026 Brandr — built with plain HTML &amp; CSS.</footer>

</body>
</html>

Keep building

More structure in Header, Flexbox, Grid, and Responsive Web Design — or browse the full Component Library.