Sidebar + content layout

Quick implementation

.layout {
  display: grid;
  grid-template-columns: fit-content(15rem) 1fr;
  gap: 1.5rem;
  min-height: 100dvh;
}

.sidebar {
  padding: 1.5rem;
  background: oklch(0.25 0.04 260);
  color: oklch(0.9 0 0);
}

.content {
  padding: 2rem;
}

Prompt this to your LLM

Paste this into ChatGPT, Claude, or any LLM to scaffold the layout.

Build a sidebar + content layout with CSS Grid. Use
grid-template-columns: fit-content(15rem) 1fr so the sidebar
sizes to its content up to 15rem, and the main content takes
the rest. Add a 1.5rem gap. The sidebar should have a dark
oklch background. Make the layout full viewport height with
min-height: 100dvh. Use semantic HTML: nav for the sidebar
and main for the content.

Why this matters

Almost every dashboard, admin panel, and documentation site needs a sidebar layout. fit-content() is the modern approach: the sidebar shrinks to its content when narrow and caps at your chosen maximum, while 1fr gives the content area all remaining space. No media queries needed for the basic structure.

The logic

fit-content(15rem) is equivalent to min(max-content, max(min-content, 15rem)) — in practice it means "be as wide as your content, but never wider than 15rem." The 1fr column absorbs all leftover space. The gap property adds consistent spacing without margin hacks. For a collapsible sidebar, you can toggle the sidebar column to 0fr with a transition.

Accessibility & performance

Wrap the sidebar in a <nav> with aria-label="Main navigation" so screen readers announce it as a landmark. Keep the content in a <main> element. This layout uses no JavaScript and paints in a single grid pass. On small screens, consider stacking the columns with a media query: grid-template-columns: 1fr.