CSS grid tracks: reserve a sidebar without letting content widen the page

How the rule works

A receipt record has a main narrative and a metadata sidebar. The narrative can contain a long code, so its track must be allowed to shrink. The sidebar has a controlled width, and the layout becomes one column once both tracks no longer fit. Keep the main narrative first in the DOM even if a mockup places the sidebar visually elsewhere. A grid cell with a long preformatted block may also need min-inline-size: 0 and a local scroll container; one rule cannot solve every overflowing child.

.receipt-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
  gap: 1.25rem;
}
.receipt-layout > * { min-inline-size: 0; }
@media (max-width: 50rem) {
  .receipt-layout { grid-template-columns: minmax(0, 1fr); }
}

Cost and verification

The browser computes track sizes on layout; the practical cost is usually a too-rigid design, not the grid algorithm. Check long identifiers, translated headings, and zoom before settling on the breakpoint. The 50rem threshold is a content-driven starting point for this example, not a device category. If the sidebar is optional, ensure it follows the narrative in reading order when the grid collapses.

Common Mistakes

• Do not assume 1fr means a track can always shrink to zero.
• Do not move the sidebar in CSS while leaving an incoherent reading order.
• Do not hide overflow on the whole page to conceal one wide child.

Connected lessons

• CSS Layout
• CSS box model and layout: size content without accidental overflow
• CSS flexbox sizing: make control rows wrap without clipping
• Responsive CSS: keep reading order and controls usable

Extend this decision

• CSS subgrid: align nested card content to shared tracks
• CSS intrinsic sizing: let content set limits without forcing overflow

Property decisions

• CSS grid template areas: name regions without rewriting document order
• CSS grid auto-placement: let repeated records fill available tracks