cssgridgenerator
App UI

CSS Grid Three Pane Email Layout Generator

Folder rail, message list and reading pane — the classic three-pane application shell.

Open in
1280px

Drag across the grid to draw an area. Arrow keys nudge, Shift + arrows resize.

space to pan · ⌘scroll to zoom
1220px2340px3minmax(0, 1fr)4
1auto21fr3
topbar1 / 1 / 2 / 4
reader2 / 3 / 3 / 4
list2 / 2 / 3 / 3
folders2 / 1 / 3 / 2

Reading orderAt Desktop, folders is the first thing seen but reader is the first thing focused. Placement has moved the layout out of document order, so keyboard and screen reader users get a different sequence from everyone else.

Seentopbar → folders → list → reader

Focusedtopbar → reader → list → folders

Usually the fix is in the markup, not in CSS: reorder the children so the HTML reads the way the page does, then place them back where you want them. Reaching for order or row-reverse instead moves the picture without moving the focus, which is the bug rather than the cure.

It is not always wrong. A full-height sidebar beside a topbar diverges by construction, and the accepted answer there is a skip link to the main content rather than a reordered document. WCAG 2.2 SC 1.3.2 asks that the sequence be meaningful — not that it be identical.

Also out of order at Tablet.

Named areas. The CSS is a picture of the layout, and only the properties that actually change get repeated inside each media query.

.mail {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 0;
  grid-template-areas:
    "topbar"
    "reader";
}

.mail > .topbar { grid-area: topbar; }
.mail > .reader { grid-area: reader; }
.mail > .list { display: none; }
.mail > .folders { display: none; }

@media (min-width: 760px) {
  .mail {
    grid-template-columns: 320px minmax(0, 1fr);
    grid-template-areas:
      "topbar topbar"
      "list   reader";
  }

    .mail > .list { grid-area: list; }
}

@media (min-width: 1100px) {
  .mail {
    grid-template-columns: 220px 340px minmax(0, 1fr);
    grid-template-areas:
      "topbar  topbar topbar"
      "folders list   reader";
  }

    .mail > .folders { grid-area: folders; }
}

How this layout works

Three panes appear one at a time as the window grows: reading pane alone on mobile, list plus reading pane on tablet, folders joining at desktop. That progression is the layout; the panes themselves never change.

Every pane scrolls independently, which means every pane needs min-height: 0 alongside its overflow: auto. Without it the tallest pane sets the height of the row and the whole window scrolls instead.

Fixed rails, fluid reading pane. 220px 340px minmax(0, 1fr) keeps the folder and list widths stable — resizing the window should change how much of the message you can read, not how many folders fit.

Every property used here is listed in the CSS Grid cheat sheet, with the reason to reach for it.

Frequently asked questions

How do I build a three pane layout?
Fixed rails and a fluid reader: 220px 340px minmax(0, 1fr). Reveal the panes as the window grows — reader alone, then list, then folders — so the layout degrades in a sensible order rather than all at once.
Why do all three panes scroll the page instead of themselves?
Each pane needs overflow: auto and min-height: 0. Without the second one the tallest pane sets the row height and the window takes over the scrolling.
How do I center a grid in CSS?
Use justify-content: center on the grid container to centre the whole grid inside it, and margin-inline: auto with a max-width to centre the container in the page. These are different jobs: the first moves the tracks within the container, the second moves the container itself.
How do I center items inside a CSS grid?
Set place-items: center on the container. That is shorthand for align-items plus justify-items, and it centres every item inside its own cell on both axes. For a single item, use place-self: center on that item instead.
How do I make a CSS grid responsive?
Use grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) and it reflows at every width with no media queries at all. Add breakpoints only when the exact column count matters, or when the layout has to change shape rather than just wrap.
When should I use CSS Grid instead of Flexbox?
Use Grid when things must line up in two directions at once, and Flexbox when content flows along one axis. A page skeleton or dashboard is Grid; a navbar or row of buttons is Flexbox. They nest: Grid for the page, Flexbox inside the cells.

How to use it

  1. Open the pattern

    The email client layout loads into the editor already responsive, with every breakpoint set up.

  2. Change the tracks

    Edit the column and row sizes in the Tracks panel. Anything valid in a track list works.

  3. Redraw at another width

    Move the ruler past a breakpoint marker and rearrange. Only the placement changes.

  4. Copy the code

    Take CSS, HTML, Tailwind or a shadcn component. The media queries are already written.

More in App UI

Elsewhere in the library

Browse all 46 layout patterns →

Related tools

Every generator here writes CSS you can paste straight into a project.