cssgridgenerator
Editorial

CSS Grid Article With Sidebar Layout Generator

A readable article column with a sticky sidebar for related posts, share links or an ad slot.

Open in
1080px

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

space to pan · ⌘scroll to zoom
1minmax(0, 68ch)2280px3
1auto2auto3
header1 / 1 / 2 / 3
article2 / 1 / 3 / 2
aside2 / 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.

.article-page {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 24px;
  grid-template-areas:
    "header"
    "article"
    "aside";
}

.article-page > .header { grid-area: header; }
.article-page > .article { grid-area: article; }
.article-page > .aside { grid-area: aside; }

@media (min-width: 900px) {
  .article-page {
    grid-template-columns: minmax(0, 68ch) 280px;
    grid-template-rows: auto auto;
    gap: 48px;
    grid-template-areas:
      "header  header"
      "article aside";
  }
}

How this layout works

The article column is capped in characters, not pixels: minmax(0, 68ch) holds the measure between roughly 55 and 75 characters, which is where reading speed peaks, and it tracks the font size instead of fighting it.

The sidebar sticks with position: sticky; top: 24px; align-self: start. Without align-self: start the item stretches to the full row height and there is nothing to scroll against, so it never sticks — this is the single most common reason a sticky sidebar does nothing.

At mobile the sidebar drops below the article rather than above it. Related links and share buttons are a post-read action; putting them first pushes the thing the visitor came for below the fold.

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

Frequently asked questions

How wide should an article column be?
About 60 to 70 characters. minmax(0, 68ch) keeps the measure in that band as the font size changes, which is where reading speed is highest — pixel widths drift the moment someone changes their default text size.
Should the sidebar go above or below the article on mobile?
Below. Related posts and share buttons are post-read actions, and putting them first pushes the article — the thing the visitor came for — under the fold.
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 article with sidebar 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 Editorial

Elsewhere in the library

Browse all 46 layout patterns →

Related tools

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