Reference

Page Layout

Place a top-level block in the centre column, in a sidebar, or spanning the whole page.

Every page on this site, this one included, is built from a handful of placement classes. They decide whether a block sits in the centre column, rides in a sidebar, or stretches across the page, and how it rearranges as the window grows and shrinks.

The three regions

An always-on main column, plus a left and right sidebar.

The main column is always there. The right sidebar appears once the window reaches 48rem, and the left one joins it at 64rem.

In placement classes, each region has a name: ( is the left sidebar, ) is the right, and main is the centre.

(
≥ 64rem
main
always
)
≥ 48rem

The left sidebar has a higher minimum viewport width than the right, so the right is always present whenever the left is. That leaves only three states:

  • Main alone on a phone
  • Main and the right sidebar on a tablet
  • All three on a desktop

Placing a block

List one or more placements; the block uses the best that fits.

A block is placed by listing one or more placement classes, each one a possible placement that specifies a run of adjoining regions the block should occupy. Neither ( nor ) may appear more than once across them.

You write the classes on a direct child of a page's <main>. For example:

<div class="(main )">

( + main = left sidebar joined to centre
) = right sidebar

Where more than one placement fits, the block prefers the left sidebar, then the right sidebar, then main. So this <div> spans the left sidebar and centre on a desktop, drops into the right sidebar on a tablet, and sits in main on a phone.

A block fills the part of its run that exists at the current width, and no more — you never set widths or breakpoints yourself. Consequently, on a phone, where there are no sidebars, (main and main are identical.

The centre column: main

The default home for text, leaving the sidebars free.

main — the centre column alone.

main keeps a block in the centre column and leaves the sidebars free. Use it for body copy, article sections, anything text-heavy.

class "main"

A working conference for the people building Postgres

PGConf.dev was founded in 2024 to fill a specific gap: a yearly room where PostgreSQL contributors and the developers integrating Postgres into other systems could spend four days together, without the conference circuit's usual layer of polish.

The format borrows from academic conferences: proposals are reviewed by a program committee, talks are technical, and a third of the schedule is unconference.

Full width: (main)

A band across the whole content area, sidebars included.

(main) — all three regions.

(main) is a box that spans the whole content area, soaking up the sidebars when they exist. Reach for it on headers, footers, heroes, and full-bleed sections. The example is live; widen past 64rem to watch (main) extend past main into the sidebar space.

class "(main)"

~600
Attendees
3
Parallel tracks
42
Talks & tutorials
4
Days

A (main) box is a single block by default. That is far wider than a comfortable line length, so when its contents are running text, add the .text class to hold them at a readable width.

When you want the contents laid out in cards or columns instead, put a grid inside it (for example, grid+16 or grid/3@)), exactly as the landing page does for its sponsor and gallery sections.

Spanning into one sidebar

(main and main) extend a box into just one side.

Between main and (main) sit the two half-spans:

(main — left sidebar + main.
main) — main + right sidebar.

Each is a single block that widens to take in its sidebar when there is room and stays in the centre when there isn't.

Reach for them when a band should lean into one margin but not both, such as a call-for-proposals banner or a sponsors strip.

class "main)"

Call for proposals

Submit a talk, tutorial, or unconference topic by 14 February. This banner runs from main into the right sidebar, so on a desktop it extends wider than the centre column.

class "(main"

Sponsors

PGConf.dev is non-profit; sponsors cover the venue, A/V, and scholarships. The same band extending the other way, from the left sidebar through main.

A half-span is most useful paired with pagegrid, which turns its regions into aligned grid columns. The timeline below, lifted from the About page, is a (main main) pagegrid band: each row lines its year up in one column and its description in the next. Widen past 48rem to see the columns split.

2024
Vancouver, BC

The first PGConf.dev

~450 attendees · 38 talks · the first unconference day · the format proves itself

2025
Montréal, QC

Second year, expanded program

~580 attendees · tutorial day added · scholarships program launches with 22 funded seats

Place a block's children: *:

Lay out an article with asides beside it, in one wrapper.

Prefix any placement with *: to apply it to a block's children instead of the block itself.

*:main is the handy one. Wrap a section in it and every child lands in the main column; then drop a ( or ) on the asides you want pushed into a margin. The About page uses it to set a marginal note beside its history text:

<section class="*:main">
  <hgroup>...</hgroup>

  <aside class="( note">...</aside>

  <p><!-- in main --></p>
</section>

Widen past 64rem to watch the aside move into the left sidebar. *:main gives the paragraphs main, but the aside's own ( overrides that and places it in the sidebar instead.

Matching other classes to the bands

Use @) and @( as breakpoint shorthands.

Any responsive variant (see the Layout page) can be tied to the page layout's breakpoints. @) means "when the right sidebar is visible" and is identical to @48-. @( means "when the left sidebar is visible" and is identical to @64-.

So grid/3@) becomes three columns exactly when the right sidebar arrives. Using these instead of raw rem values keeps a block tied to the page layout if the breakpoints ever move.