Grid

Breakpoints

Column anatomy

Each breakpoint defines a fixed column count. The 12-column desktop structure allows halves, thirds, quarters, and two-thirds splits without fractional columns.

Mobile — 4 col

Tablet — 8 col

Desktop — 12 col

Common splits

Container

.source-container centers content, caps it at 1280px, and applies the correct page margin at each breakpoint. Use it as a wrapper for page-level sections.

<div class="source-container">
  <!-- page content -->
</div>

Grid

.source-grid sets up the responsive column structure. Children span columns with grid-column: span N in local CSS — no span utility classes. Responsive overrides go in your own media queries.

<div class="source-container">
  <div class="source-grid">
    <div style="grid-column: span 9">Main content</div>
    <div style="grid-column: span 3">Sidebar</div>
  </div>
</div>

Responsive spans

At sm there are only 4 columns. A child spanning 8 on desktop should span 4 on mobile. Handle this with a local media query on the element.

.my-main {
  grid-column: span 4;
}

.my-aside {
  grid-column: span 4;
}

@media (min-width: 768px) {
  .my-main  { grid-column: span 5; }
  .my-aside { grid-column: span 3; }
}

@media (min-width: 1280px) {
  .my-main  { grid-column: span 8; }
  .my-aside { grid-column: span 4; }
}

Nesting

Nest a .source-grid inside a grid child. The inner grid starts fresh at 12 columns and is sized by its parent column span.

<div class="source-grid">
  <div style="grid-column: span 8">
    <div class="source-grid">
      <div style="grid-column: span 6">Left half</div>
      <div style="grid-column: span 6">Right half</div>
    </div>
  </div>
</div>

Breakpoint tokens

Utility classes