Layout

Use a plain <hr> for an unlabeled divider between sections. Rule is a Svelte component for the less common case where the divider needs a visible label.

.section-number prepends a section counter to an element in the form § 01 ·. Each use increments automatically, so sections number themselves. Use it on the label paragraph inside an <hgroup>.

.li-number prepends the list item's ordinal in monospace. Use it on navigation lists where the number should appear inside the link rather than outside it.

.screen gives an element the site's standard 16:9 aspect ratio. Its content fills the element's box and is cropped to fit.

.square is similar, but with a 1:1 aspect ratio. Use it for portraits, or for images that sit together in a grid.

The crop on either .screen or .square is centered by default. Set object-position to choose which part of the image survives it, e.g. object-position: center 85% to keep the bottom of a tall photo.

All layout classes zero out the block margins of their direct children, since gap handles the spacing between items.

None

none hides an element (with display: none). Its main use is with a responsive variant to show or hide content at specific viewport widths.

Flex

flex lays out children horizontally (in a flexbox), wrapping as needed. Use it for a row of buttons, badges, or other inline-sized elements.

Grid

grid-A:B:… creates a fixed grid with one column per number, sized in that ratio. So grid-1:2:1 is three columns whose middle column is twice as wide as those on either side. Use it to build a custom grid layout.

grid/N is the equal-width special case: it divides children into exactly N equal columns, the same as grid-1:1:… repeated N times.

grid+N arranges children in a grid, with columns at least N rem wide, fitting as many as possible before wrapping. Use it for card grids where the number of columns should adapt to the available space.

subgrid lets a spanning grid item's children align with the outer grid's column tracks. In the example below, the two children inside the spanning item line up with the items in the row above.

Page Grid

pagegrid turns a page-layout span (one of the Page Layout classes that covers more than one region, like (main) or main)) into a grid with one column per region, so its children line up with main and the sidebars. On its own it is a single-column grid; the span supplies the extra columns at each breakpoint.

The About page timeline uses (main main) pagegrid: a fallback between the boxes (main and main), so each row leans into the left sidebar on a desktop and the right one on a tablet, with the year in one column and its description in the other.

Column placement

column-N positions a grid item in column N. column-span-N stretches a grid item across N columns. To set where an item both starts and ends, add a second value: column-2-span-3 starts at column 2 and spans 3 columns, while column-2-4 runs from the start of column 2 to the start of column 4 (covering columns 2 and 3). span works in either position.

Responsive variants

Any layout class (and none) can be scoped to a viewport width range by appending @min-max. min and max are rem values; either can be omitted.

.dedent removes the markers and start padding from a list. Its main use is when you want to lay out list items with flex or grid while keeping their list semantics intact.

On a <dd> or parent <dl>, it removes the start indent from definition values — useful when laying out a <dl> in a grid.