cssgridgen
Layout pattern

CSS Grid Sidebar Layout Generator

One fixed column, one fluid column, stacked on small screens.

Open in
948px

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

1minmax(180px, 240px)21fr3
11fr2
sidebar1 / 1 / 2 / 2
content1 / 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.

.with-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 24px;
  grid-template-areas:
    "sidebar"
    "content";
}

.with-sidebar > .sidebar { grid-area: sidebar; }
.with-sidebar > .content { grid-area: content; }

@media (min-width: 768px) {
  .with-sidebar {
    grid-template-columns: minmax(180px, 240px) 1fr;
    grid-template-rows: 1fr;
    gap: 32px;
    grid-template-areas:
      "sidebar content";
  }
}

How this layout works

The simplest useful two-column layout: a sidebar at a fixed or constrained width and content that takes the rest. minmax(180px, 240px) lets the sidebar flex a little between those bounds instead of snapping.

Swap the column order at the desktop breakpoint if you want the sidebar on the right — the DOM stays put, only the placement changes. Be deliberate about it: a visual order that contradicts the DOM will confuse anyone tabbing through.

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 put the sidebar on the right at desktop only?
Change its placement at the wider breakpoint instead of reordering the HTML — the same element moves from column 1 to column 2. Check the result by keyboard: a sidebar that looks last but comes first in the DOM is tabbed into first.
Should a sidebar be a fixed width?
A range usually reads better. minmax(180px, 240px) lets it breathe between those bounds as the viewport changes rather than snapping between two states.
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 sidebar 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.

Other layout patterns

Related tools

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