CORE UTILITY FAMILY

Flexbox and grid

Build one- and two-dimensional layouts with flex direction, wrapping, grid tracks, spans, automatic placement, and alignment utilities.

completeTarget v0.28 verified examplesRegistry JSON ↗

WHEN TO USE IT

Choose the right tool for the layout.

Use flex for content distributed along one primary axis and grid when rows and columns must coordinate. Apply gap on the container and span/start/end utilities on children.

QUICK REFERENCE

Classes and generated CSS

These examples are resolved by the compiler when the registry manifest is generated. A broken example fails the test suite.

ClassGenerated declarations and keyframes

co-flex-[3_1_auto]flex: 3 1 auto;

co-grow-3flex-grow: 3;

co-basis-smflex-basis: var(--co-container-sm);

co-items-center-safealign-items: safe center;

co-grid-cols-subgridgrid-template-columns: subgrid;

co-auto-rows-[minmax(0,2fr)]grid-auto-rows: minmax(0,2fr);

-co-col-start-2grid-column-start: calc(2 * -1);

co-row-span-(--span)grid-row: span var(--span) / span var(--span);

VISUAL EXAMPLE · FLEX ALIGNMENT

Distribute actions along one axis

Use flex when items share one primary direction. Alignment utilities control the cross axis, while justify utilities distribute the available inline space.

Logo

DocsAPI

Start

component.coord

<header class="co-flex co-items-center co-justify-between co-gap-4">
  <strong>Coordiation</strong>
  <nav class="co-flex co-items-center co-gap-3">...</nav>
  <button>Get started</button>
</header>

VISUAL EXAMPLE · FLEX WRAP

Let variable-width items wrap

Wrapping is useful for tags, filters, and compact controls whose width depends on their label. Gap remains consistent across rows and columns.

CompilerZero runtimeAI friendlyLogical CSSDisplay-P3HMR

component.coord

<ul class="co-flex co-flex-wrap co-gap-3">
  <li>Compiler</li>
  <li>Zero runtime</li>
  <li>AI friendly</li>
  <li>Logical CSS</li>
</ul>

VISUAL EXAMPLE · GRID TRACKS

Coordinate rows and columns

Use grid when both axes need to align. Numeric track utilities emit equal minmax columns that can shrink without forcing content overflow.

01Analytics

02Automation

03Security

component.coord

<section class="co-grid co-grid-cols-1 md:co-grid-cols-3 co-gap-3">
  <article>Analytics</article>
  <article>Automation</article>
  <article>Security</article>
</section>

VISUAL EXAMPLE · GRID PLACEMENT

Span important content across tracks

Column span utilities let one item occupy more tracks while the remaining items continue through normal grid placement.

Primary report · co-col-span-2

Summary

Activity timeline · co-col-span-3

component.coord

<section class="co-grid co-grid-cols-3 co-gap-3">
  <article class="co-col-span-2">Primary report</article>
  <aside>Summary</aside>
  <article class="co-col-span-3">Activity timeline</article>
</section>

BASIC USAGE

Apply a utility directly.

Keep the complete class string in your template so the plain-text scanner can discover it without evaluating application code.

component.coord

<div class="co-flex-[3_1_auto] co-grow-3 co-basis-sm co-items-center-safe co-grid-cols-subgrid co-auto-rows-[minmax(0,2fr)] -co-col-start-2 co-row-span-(--span)">
  Your content
</div>

HOW IT WORKS

Core concepts

01
co-flex and co-grid only establish layout mode; direction and track definitions remain explicit.
02
Numeric grid tracks use repeat(n, minmax(0, 1fr)) to prevent content overflow.
03
Subgrid adopts tracks from the parent grid instead of creating an independent track list.
04
Safe alignment falls back toward the start edge when centered or end-aligned content would overflow.
05
Grid lines and order accept canonical negative syntax before the co- prefix.

CSS PROPERTIES

What this family controls

displayflexflex-directionflex-wrapflex-growflex-shrinkflex-basisordergrid-template-columnsgrid-template-rowsgrid-auto-columnsgrid-auto-rowsgrid-auto-flowgrid-columngrid-rowalign-itemsalign-contentalign-selfjustify-contentjustify-itemsjustify-selfplace-contentplace-itemsplace-self

VARIANTS

Responsive and state conditions

Prefix any supported utility with responsive or state variants. Variants compose from left to right and the compiler emits the required selector or at-rule.

component.coord

<div class="co-flex-[3_1_auto] md:co-grow-3 hover:co-flex-[3_1_auto]">
  Responsive and state-aware content
</div>

ARBITRARY VALUES

Escape the scale when necessary

Use square brackets for a one-off CSS value. Prefer theme tokens for values repeated across components so an AI agent and human reviewer can recognize design intent.

Arbitrary syntax

co-flex-*
co-[content-visibility:auto]

NEGATIVE VALUES

Reverse supported values

Place the minus sign before the framework prefix. Only properties where negative CSS values are meaningful accept this modifier.

Canonical negative syntax

-co-{utility}
-co-col-start-2

SCOPE BOUNDARIES

Intentional boundaries

This family is implemented, documented, and tested. These notes define where a neighboring family or browser behavior takes over.

Masonry is intentionally excluded until interoperable browser support is stable.
Named grid lines use arbitrary values or CSS custom properties because names belong to the application schema.

Previous← Layout and positioning NextSpacing →