Outgrid

Usage

One class makes the grid, and the rest is the CSS grid you already know. Columns are placed with plain grid lines, and a few classes take an element out to the edges of the screen without losing the columns.

<div className="og-grid">
  <img className="og-full" />
  <aside className="col-span-3">…</aside>
  <main className="col-span-9">…</main>
</div>

Under the classes there's nothing new: a grid with named lines, a max width, padding and gutters, all set once with custom properties.

What you get

• Plain CSS. One stylesheet, no JavaScript, no build step. With Tailwind there's a second entry that registers the same classes as utilities, so md:og-full works too.
• Full bleed from anywhere. og-full runs an element to the edges of the screen from any column and at any depth, and og-px-bleed brings its content back on the columns.
• One setup. Columns, max width, padding and gutters are custom properties: I set them once on :root, and every grid on the page follows.
• Nothing new to place things. grid-column, col-span-6, grid-cols-subgrid work the way they always do. The library doesn't wrap them.
• Never in the way. Every class has zero specificity, so any other class on the same element wins, whatever the order.

Limits

The bleed is measured against 100vw, and 100vw includes the scrollbar. Where the scrollbar takes up space, a bleeding element runs a few pixels past the edge of the page.