CSS Grid

Two-dimensional layout. Perfect for sidebars + main content + footer rows.

Code example

.competition-detail-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.5rem;
}
@media (max-width: 800px) {
  .competition-detail-grid { grid-template-columns: 1fr; }
}

How it works

CSS Grid lets you lay out content in two dimensions (rows AND columns) — flexbox only does one dimension at a time. Define columns with grid-template-columns (1fr = one fraction of the available space). Add a media query to collapse to one column on mobile. Grid is the right tool for page-level layout (sidebar + main); flex is the right tool for component-level layout (toolbar, button row). OpenBenchML uses grid for the competition detail page and the notebook layout.