Layout

Two containers and one flex helper. Everything else is native CSS.

Container

.container centers content and steps its max width at each breakpoint. .container-fluid keeps the padding but spans the full width, which is what you want for a header or a full-bleed section.

Viewport	`.container` max width
< 576px	100%, 1rem padding
≥ 576px	510px
≥ 768px	700px
≥ 1024px	950px
≥ 1280px	1200px
≥ 1536px	1450px

A bare .container also caps at 80ch and adds bottom padding, which is the reading measure this documentation uses.

<header class="container-fluid">…</header>
<main class="container">…</main>

Flex

.flex is display: flex with a 1rem gap. That is the whole utility.

One

Two

Three

<div class="flex">
  <article class="card" style="flex: 1">One</article>
  <article class="card" style="flex: 1">Two</article>
  <article class="card" style="flex: 1">Three</article>
</div>

Flip

Add .flip and the row becomes a column below 600px. Add .reverse and it stacks bottom-up, which is how you get a sidebar that appears above the content on mobile but beside it on desktop.

Main content

Sidebar

Main, second on mobile

Sidebar, first on mobile

<div class="flex flip">
  <article class="card" style="flex: 2">Main content</article>
  <article class="card" style="flex: 1">Sidebar</article>
</div>

<div class="flex flip reverse">
  <article class="card" style="flex: 2">Main, second on mobile</article>
  <article class="card" style="flex: 1">Sidebar, first on mobile</article>
</div>

Resize the window to see the breakpoint.

Grid

There is no grid utility. Use CSS, and use the framework's variables for spacing so it stays in rhythm.

Auto

Fitting

Grid

Cells

<div
  style="
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--padding);
  ">
  <article class="card">Auto</article>
  <article class="card">Fitting</article>
  <article class="card">Grid</article>
  <article class="card">Cells</article>
</div>

Spacing

--padding is the base unit. Block elements carry a 1rem bottom margin; list items carry 0.25rem.

.tight {
  --padding: 0.5rem;
}

.roomy {
  --padding: 2rem;
}