Overview

The site layout utilizes modern CSS Grid and Custom Properties. Values are calculated relative to the viewport width defined in :root.

Grid Properties

1. Spacing & Gutters

Variable	Description
`var(--fw-container-gutter)`	Outer Margin. The dynamic space between the browser edge and the content. Use this for `padding-inline` on full-width containers.
`var(--fw-column-gap)`	Inner Gutter. The space between grid items.

2. Foundational Dimensions

These variables represent the raw values used to calculate the grid. They are useful for JS calculations or advanced CSS geometry.

Variable	Description
`var(--fw-column-count)`	Grid Total. The number of available columns at the current breakpoint (e.g., `4` on mobile, `12` on desktop).
`var(--fw-column-width)`	Single Column. The calculated width of one column unit without gutters.
`var(--fw-page-width)`	Viewport Width. The width of the document minus the scrollbar. Use this instead of `100vw` to prevent horizontal scrollbar shifting.
`var(--fw-container-width)`	Max Constraint. The calculated width of the main `.fw-container` element (excludes the outer gutters).

3. Columns (`--fw-columns-x`)

These variables calculate the width of spanning columns, including the gaps between them.

Formula: (Column Width × X) + (Gap × (X - 1))

Variable	Use Case
`var(--fw-columns-1)`	Width of 1 column
`var(--fw-columns-2)`	Width of 2 columns + 1 gap
`var(--fw-columns-3)`	Width of 3 columns + 2 gaps
…	…
`var(--fw-columns-12)`	Full width

4. Offsets (`--fw-offset-x`)

These variables calculate the spacing required to push an item over, including the trailing gap.

Formula: (Column Width × X) + (Gap × X)

Variable	Use Case
`var(--fw-offset-1)`	1 Column + 1 Gap
`var(--fw-offset-2)`	2 Columns + 2 Gaps

Implementation Examples

Standard Grid Wrapper

Use .fw-grid to establish the grid context. This automatically applies the correct column-gap and grid-template-columns count based on the viewport. Note that because the column count changes (2, 6, 12), you should typically use media queries to adjust grid-column spans for different breakpoints.

<div class="fw-container">
    <div class="fw-grid">
        <div style="grid-column: span 6">Left</div>
        <div style="grid-column: span 6">Right</div>
    </div>
</div>

Custom Component Layouts

When building components that need custom widths (like .gallery), you can use the CSS variables directly to align with the grid.

Example SCSS:

.my-component {
    display: grid;
    // Use the global gap
    gap: var(--fw-column-gap);

    // Default to full width
    grid-template-columns: 100%;

    @media #{$min_md} {
        // Create a custom 2-column layout
        // Left column fills space, Right column is fixed to 2 grid columns wide
        grid-template-columns: minmax(0, 1fr) var(--fw-columns-2);
    }
}

Grid & Layout