2-column grid layout

Quick implementation

.grid-2col {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1.5rem;
}

/* Collapse to single column on narrow viewports */
@media (max-width: 48rem) {
  .grid-2col {
    grid-template-columns: 1fr;
  }
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building a page layout.

Goal: A two-column layout with sidebar and main content using CSS Grid — no JavaScript.

Technical constraints:
- Use display: grid with grid-template-columns: 1fr 2fr for a 1:2 ratio.
- Use gap for spacing — no margin hacks.
- Collapse to a single column below 48rem using a media query.
- Use oklch() for any color values, not hex or rgba().
- Sidebar should not shrink below a readable width.

Framework variant (pick one):
A) Vanilla HTML + CSS only.
B) React component — accept children for sidebar and main slots via props.

Edge cases to handle:
- Content taller than the viewport should scroll independently if needed.
- Sidebar and main should not overlap on narrow viewports.
- Ensure the layout works with dynamic content of varying heights.

Return HTML + CSS.

Why this matters in 2026

The two-column layout is the most common page structure on the web — documentation, dashboards, settings pages, and blogs all use it. Before CSS Grid, developers hacked this with floats, inline-block tricks, or flexbox workarounds that broke when content heights differed. Grid solves it in a single declaration.

The logic

grid-template-columns: 1fr 2fr creates two tracks in a 1:2 ratio. The fr unit distributes available space proportionally, so the main column always gets twice the width of the sidebar. The gap property handles spacing without margin gymnastics. On small screens, a media query switches to grid-template-columns: 1fr, stacking the columns vertically.

Accessibility & performance

Grid layout has zero performance overhead compared to floats or flexbox — the browser resolves track sizes in a single pass. For accessibility, ensure the source order matches the reading order. If the sidebar appears visually on the left but should be read after the main content, use order to reposition it visually without changing the DOM. Screen readers follow DOM order, not visual order.