cssgridgen
Layout pattern

CSS Grid App Shell Layout Generator

Rail, sidebar, header, content and a status bar — the full desktop application frame.

1280px

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

156px2240px31fr4
1auto21fr3auto4
rail1 / 1 / 3 / 2
header1 / 3 / 2 / 4
main2 / 3 / 3 / 4
status3 / 1 / 4 / 4
sidebar1 / 2 / 3 / 3

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

.app-shell {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 0px;
  grid-template-areas:
    "rail   header"
    "rail   main"
    "status status";
}

.app-shell > .rail { grid-area: rail; }
.app-shell > .header { grid-area: header; }
.app-shell > .main { grid-area: main; }
.app-shell > .status { grid-area: status; }
.app-shell > .sidebar { display: none; }

@media (min-width: 1100px) {
  .app-shell {
    grid-template-columns: 56px 240px 1fr;
    grid-template-areas:
      "rail   sidebar header"
      "rail   sidebar main"
      "status status  status";
  }

    .app-shell > .sidebar { grid-area: sidebar; }
}

How this layout works

An app shell adds a narrow icon rail beside the sidebar and a status strip along the bottom. Five regions, all pinned, one scrolling.

Because every region is named, you can rearrange the whole application frame by editing the area map and nothing else. That is the argument for grid-template-areas over line numbers: the CSS becomes a picture of the layout.

The rail survives at every width; the sidebar is the first thing to go.

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

Frequently asked questions

What is an app shell layout?
The persistent frame of a desktop-style web app: an icon rail, a sidebar, a header, a status strip, and exactly one scrolling content region. Everything but the content stays pinned, so navigating never repaints the chrome.
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.

Other layout patterns

Related tools