Usage
The grid, the bleed and the setup, with Tailwind classes.
Basic layout
og-grid centres the columns, caps them at the max width and pads the sides. Its children span the whole content area until you place them.
<div className="og-grid">
<aside className="col-span-3">…</aside>
<main className="col-span-9">…</main>
</div>Placing items
Placing is plain CSS grid, so Tailwind's column and row classes work as they are.
<div className="og-grid">
<div className="col-5">…</div>
<div className="col-start-2 col-end-5">…</div>
<div className="col-start-7 col-span-6">…</div>
<div className="col-span-12 row-3">…</div>
</div>Responsive
There are no breakpoints of its own. The ones the project already uses apply to the placement, and to the Outgrid classes too.
<div className="og-grid">
<article className="col-span-12 md:col-span-6 lg:col-span-4">…</article>
<article className="col-span-12 md:col-span-6 lg:col-span-4">…</article>
<article className="col-span-12 md:col-span-6 lg:col-span-4">…</article>
</div>Nesting
grid-cols-subgrid reuses the parent's columns instead of making new ones, so nested items stay aligned to the page. The gutter comes with them.
<div className="og-grid">
<section className="col-span-8 grid grid-cols-subgrid">
<article className="col-span-4">…</article>
<article className="col-span-4">…</article>
</section>
<aside className="col-span-4">…</aside>
</div>Aligned rows
grid-rows-subgrid does the same for rows: sibling cards share them, so titles, text and footers line up even when the text is longer in one of them.
<div className="og-grid">
<article className="col-span-4 row-span-3 grid grid-rows-subgrid">
<h3>…</h3>
<p>…</p>
<footer>…</footer>
</article>
<article className="col-span-4 row-span-3 grid grid-rows-subgrid">…</article>
<article className="col-span-4 row-span-3 grid grid-rows-subgrid">…</article>
</div>Full bleed
og-full runs an item to the edges of the screen. og-start-full and og-end-full bleed one side only, and og-pl-bleed, og-pr-bleed and og-px-bleed bring the content back on the columns. og-content takes an item back to the content area, so a variant can start or stop the bleed at a breakpoint.
<div className="og-grid">
<img className="og-full" />
<nav className="og-start-full col-end-4 og-pl-bleed">…</nav>
<figure className="og-content lg:og-full">…</figure>
</div>Without columns
og-container gives you the width and padding of the grid, without columns.
<header className="og-container">…</header>Setup
Everything is a custom property. I set them once on :root, after the import:
@import "tailwindcss";
@import "outgrid/tailwind";
:root {
--og-columns: 12;
--og-max-width: 90rem;
--og-padding: 1rem;
--og-gutter-x: 2rem;
--og-gutter-y: 2rem;
}Every class has zero specificity, so a Tailwind class on the grid wins over the defaults and a single grid can change without touching the properties:
<main className="og-grid gap-y-0">…</main>Reference
| class | |
|---|---|
og-grid | the grid: centred, capped at the max width, padded on both sides |
og-container | the width and padding of the grid, without columns |
og-full | edge to edge of the screen |
og-content | the whole content area; cancels any bleed |
og-start-full | bleeds off the left edge |
og-end-full | bleeds off the right edge |
og-pl-bleed / pr / px | padding as wide as the bleed, to bring content back on the columns |
| token | |
|---|---|
--og-columns | number of columns; 12 by default |
--og-max-width | the widest the content area gets, padding excluded |
--og-padding | side padding of the grid |
--og-gutter-x | space between columns |
--og-gutter-y | space between rows |
--og-bleed | distance from the content area to the edge of the screen; computed, read it, don't set it |