Layouts
The structural patterns that control how content is sized, spaced, and arranged across the site. These are all utility classes applied directly in HTML – no component import needed. For higher-level layout components like Section, see Code / Astro components.
Container widths
Two max-width constraints keep content readable at any viewport size.
container is the outer page wrapper; content is
the narrower column used for body text and inline elements.
var(--container-max-width) var(--content-max-width) Breakout styles
Three ways to break an element out of the normal content column – useful for images, device screenshots, and pull quotes.
Centred
Standard content width paragraph. This represents the normal reading width for body text, optimised for comfortable reading.
Back to standard width. The .breakout class can be applied to images, device screenshots, or any element that should break out of the text column.
<img src="..." class="breakout" /> <div class="breakout"><DeviceScreenshot ... /></div> Left and right float
An image can also break out to one side, with body text wrapping
around it. Apply float-left or float-right
directly to an <img>. The float only activates above
980 px – on mobile the image drops to full width in normal flow.
Body text flows around the image on its right. The image breaks 40 % into the left margin while staying 80 % of the content column wide – so it extends well beyond the normal reading width on the left side only.
A second paragraph continues to wrap until it clears the float.
The same pattern mirrored: the image breaks out to the right while body text wraps on the left.
A second paragraph continues to wrap until it clears the float.
<img src="..." class="float-left" /> <img src="..." class="float-right" /> Spacing scale
Eight steps built on a 4 px base. Each level doubles or steps up from the last, so spacing relationships stay consistent whether you are padding a button or separating page sections.
Grid layouts
Fixed-column grids for structured content like card rows or feature
lists. grid-auto is the responsive alternative – it fills the
available width and wraps automatically when the viewport shrinks.
Two column
Three column
Auto-fill (responsive)
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) Breakpoints
Two breakpoints drive the responsive behaviour across the site. Grids collapse from three columns to two at tablet width, and to a single column on mobile. Navigation and hero layouts adapt at the same thresholds.