How Archify's Grid Layout System Places Components Using Pure CSS Grid

Archify positions UI components using a pure CSS Grid foundation defined in viewer/template.source.html, utilizing track definitions like grid-template-columns: auto minmax(9rem,13.5rem) minmax(0,1fr) to create responsive, three-column layouts for headers, share cues, and cards.

The tt-a1i/archify repository implements its entire UI positioning strategy through declarative CSS Grid containers rather than traditional float or Flexbox approaches. This architecture ensures consistent component alignment across responsive breakpoints while allowing dynamic adjustments via JavaScript-injected CSS custom properties.

Root Container and Width Constraints

The layout hierarchy begins with a .container element that constrains the maximum width of diagrams using the CSS variable --archify-reader-width. While the body element remains a standard block container, this wrapper centers content and establishes the boundary for nested grid systems.

.container {
  max-width: var(--archify-reader-width);
  margin: 0 auto;
}

Header Row Grid Structure

The primary navigation surface uses a .header-row class that declares a three-column grid template. This pattern appears consistently across the application's chrome.

The Three-Column Track Definition

In viewer/template.source.html, the header implements a sophisticated track distribution:

.header-row {
  display: grid;
  grid-template-columns: auto minmax(9rem,13.5rem) minmax(0,1fr);
}

• Column 1 (auto): Hosts fixed-width elements like the logo, consuming only necessary space.
• Column 2 (minmax(9rem,13.5rem)): Contains the title and subtitle group, guaranteeing a minimum width of 9rem while allowing expansion up to 13.5rem.
• Column 3 (minmax(0,1fr)): Expands to fill remaining horizontal space, hosting the toolbar and right-aligned controls.

This structure ensures the logo remains left-aligned, the title stays centered within its constrained zone, and the toolbar always sits flush right regardless of viewport width.

Share-Chapter Cue Implementation

When displaying shared playback cues, Archify reuses the identical three-column grid pattern for visual consistency. The .share-chapter-cue class applies the same track definition when not hidden:

.share-chapter-cue:not([hidden]) {
  display: grid;
  grid-template-columns: auto minmax(9rem,13.5rem) minmax(0,1fr);
}

This grid accommodates a small icon or index in the first column, a center-aligned chapter title in the second, and right-aligned timestamps or playback controls in the third.

<div class="share-chapter-cue" data-state="playing">
  <div class="share-chapter-index">01</div>
  <div class="share-chapter-copy">
    <strong>Initialize Service</strong>
    <small>Step 1 of 5</small>
  </div>
  <div class="share-chapter-state">Playing</div>
</div>

Card and Content Panel Grids

Side panels and card components utilize grid layouts defined in both template.source.html and scripts/gallery-template.html.

Card Header Layout

The .card-header class implements a three-column grid optimized for index badges, titles, and action buttons:

.card-header {
  display: grid;
  grid-template-columns: 60px 1fr auto;
}

• Column 1 (60px): Reserves fixed space for an index badge or icon.
• Column 2 (1fr): Occupies remaining space for the main title text.
• Column 3 (auto): Sizes to fit action buttons aligned to the right edge.

<div class="card-header">
  <div class="card-index">02</div>
  <div class="card-title">Auth Service</div>
  <button class="card-action">Details</button>
</div>

Diagram Container and Dynamic Adjustments

The .diagram-container element itself is not a grid container, but participates in the overall layout through CSS custom properties managed by viewer/viewer-chrome-layout.js. This script dynamically calculates and writes the --archify-nav-reserve variable to prevent the navigation rail from overlapping diagram content:

// viewer-chrome-layout.js conceptual implementation
document.documentElement.style.setProperty(
  '--archify-nav-reserve', 
  `${calculatedBottomOffset}px`
);

This reserve applies via CSS custom properties, keeping the diagram's internal grid-based content undisturbed while ensuring the chrome-layout script maintains spatial relationships.

Blueprint Theme Background Grid

For the Blueprint preset, Archify generates a grid-based background using layered linear gradients rather than CSS Grid tracks. This creates the classic engineering-paper aesthetic:

html[data-preset="blueprint"] body {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
}

The var(--grid) variable defines a 1-pixel line color, creating a 32-pixel square grid pattern that overlays the entire viewport without affecting component positioning.

Summary

• Archify's grid layout system relies entirely on CSS Grid definitions in viewer/template.source.html rather than Flexbox or float-based approaches.
• Three-column patterns dominate the interface, using auto, minmax(), and fr units to balance fixed and flexible content areas.
• Responsive behavior emerges from track definitions like minmax(9rem,13.5rem) that clamp content width while allowing expansion.
• Dynamic layout adjustments occur through viewer-chrome-layout.js writing CSS variables such as --archify-nav-reserve to handle browser chrome and navigation overlays.
• Card components reuse grid principles with fixed-pixel first columns (60px) for badges and 1fr for fluid title areas.

Frequently Asked Questions

What CSS Grid properties does Archify use for responsive headers?

Archify uses grid-template-columns: auto minmax(9rem,13.5rem) minmax(0,1fr) for the .header-row class. The minmax() function ensures the title column never shrinks below 9rem while the toolbar column (minmax(0,1fr)) can collapse to zero if necessary before expanding to fill available space.

How does Archify prevent the navigation rail from overlapping diagram content?

The viewer-chrome-layout.js script calculates the necessary offset and writes it to the --archify-nav-reserve CSS custom property. This variable reserves space at the bottom of the .diagram-container without modifying the grid structure, ensuring the navigation rail remains visible without obscuring diagram elements.

Where is the Blueprint theme's grid background defined?

The Blueprint preset's grid lines are defined in viewer/template.source.html using two perpendicular linear-gradient layers applied to html[data-preset="blueprint"] body. Each gradient generates 1-pixel lines spaced 32 pixels apart, creating a classic engineering grid aesthetic without using CSS Grid tracks.

How are card components structured within Archify's grid system?

Card headers use grid-template-columns: 60px 1fr auto as defined in the gallery templates. This creates a fixed 60-pixel column for index badges, a fluid column (1fr) for titles, and an auto-sized column for action buttons, ensuring consistent alignment across variable content lengths.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}