Layout System

The Avionics layout system uses a sophisticated CSS Grid approach for responsive, content-focused layouts. Every page shares the same .grid-layout applied to <main> in BaseLayout.astro.

Prose Contexts

We distinguish between generic prose and article content:

• .prose: Generic typography styles for any text block. Uses display: contents so children participate directly in the parent grid.
• .content-prose: Enhanced styles for long-form articles, including specific spacing for headings and lists.

Spacing Tokens

--s-grid-unit: 0.5em;          /* Fundamental grid unit */
--s-gutter-min: var(--s-grid-unit); /* Minimum gutter width */
--s-gutter-max: 9.7ch;         /* Maximum gutter width */
--s-content-max: 67ch;         /* Optimal reading width */
--s-grid: 24px;                /* Base grid unit (components) */
--s-gap: 1.5rem;               /* Standard gap between elements */

Content Grid

The .grid-layout class defines a 6-column symmetric grid with three named content zones. This is the backbone of every page.

.grid-layout {
  display: grid;
  grid-template-columns:
    [full-start]     minmax(var(--s-gutter-min), 1fr)
    [breakout-start] minmax(var(--s-gutter-min), var(--s-gutter-max))
    [content-start]  min(100% - 4 * var(--s-grid-unit), var(--s-content-max))
    [content-end]
                     minmax(var(--s-gutter-min), var(--s-gutter-max)) [breakout-end]
                     minmax(var(--s-gutter-min), 1fr)                 [full-end];
}

Column Map

Zone Widths

Zone	Named lines	Width	Use case
content	content-start / content-end	max 67ch	Body text, headings, lists — optimal reading measure
breakout	breakout-start / breakout-end	content + 2 × 9.7ch gutters	Tables, figures, code blocks, diagrams
full	full-start / full-end	100% viewport	Hero sections, full-bleed backgrounds

Default Placement

All direct children of .grid-layout default to the content column. Opt in to wider zones with utility classes:

.grid-layout > *          { grid-column: content;  }  /* default */
.grid-layout > .breakout  { grid-column: breakout; }
.grid-layout > .full      { grid-column: full; width: 100%; }

Live Demo

The bars below are placed inside the page's .grid-layout to show real column boundaries:

Automatic Breakout

Some elements break out automatically via CSS rules in prose.css and grid.css — no class needed:

• table inside .prose → breakout
• figure inside .prose → breakout

Prose & Grid Integration

The .prose class uses display: contents, which makes its children direct grid participants. This is what allows markdown-rendered content (headings, paragraphs, tables) to align to named grid columns without extra wrapper markup:

.grid-layout > .prose { display: contents; }
.prose > *             { grid-column: content; }
.prose > table          { grid-column: breakout !important; }

Spec Grid

A responsive grid for card collections (Concepts, Patterns, Practices):

.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-gap);
}