cssgridgenerator
Page shells

CSS Grid Two Column Layout Generator

Content and a sidebar, with the sidebar width you actually want at each size.

Open in
1040px

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

space to pan · ⌘scroll to zoom
1minmax(0, 1fr)2minmax(240px, 320px)3
1auto2
main1 / 1 / 2 / 2
side1 / 2 / 2 / 3

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

.two-col {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  grid-template-areas:
    "main"
    "side";
}

.two-col > .main { grid-area: main; }
.two-col > .side { grid-area: side; }

@media (min-width: 860px) {
  .two-col {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    grid-template-rows: auto;
    gap: 32px;
    grid-template-areas:
      "main side";
  }
}

How this layout works

minmax(0, 1fr) 320px beats 1fr 320px for the same reason every time: a bare 1fr is really minmax(auto, 1fr), and auto refuses to shrink below the widest thing inside it. One long URL or wide table and the sidebar gets squeezed off the screen.

Between the fold-down and the fixed sidebar there is a middle range where minmax(240px, 320px) reads better than either. The sidebar breathes with the viewport instead of snapping between two states.

If the sidebar should come first visually at desktop but last in the document, move it in the grid, not in the HTML. That keeps the tab order and the screen-reader order matching the content, which is what WCAG 1.3.2 asks for.

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

Frequently asked questions

Why does my sidebar get pushed off the screen?
The content track is probably 1fr, which resolves to minmax(auto, 1fr) and will not shrink below its widest child. One long URL, table or code block then forces the whole grid wider. Use minmax(0, 1fr) instead.
What is a good sidebar width?
A range beats a fixed value: minmax(240px, 320px) lets the sidebar breathe with the viewport rather than snapping between two states, while still guaranteeing the content column never gets squeezed.
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 two column 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 Page shells

Elsewhere in the library

Browse all 46 layout patterns →

Related tools

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