On this page

Layout & theming

Grid released

A grid that finds its own column count from the narrowest a card may get, with no media query to write.

Source

Import@pacit/components/grid
Selectorpct-grid

No APG pattern applies, and none is invented — the reasoning is under Accessibility ↓

One

Two

Three

Four

Five

Six

import { Component } from '@angular/core';
import { PctGrid } from '@pacit/components/grid';

/** Tiles find their own column count from one minimum width — no media query anywhere. */
@Component({
  selector: 'demo-grid',
  imports: [PctGrid],
  // The host states its width — the stage is a flex row, and `auto-fit` under a width
  // that is not definite repeats exactly once: one column, and a grid reads as a stack
  // (lesson-146).
  styles:
    ':host { display: block; inline-size: 100%; } div { border: 1px solid var(--pct-border); border-radius: 8px; padding: 12px; }',
  template: `
    <pct-grid style="--pct-grid-min-width: 8rem">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
      <div>Six</div>
    </pct-grid>
  `,
})
export class GridDemo {}

grid.demo.ts — the same file runs here and is highlighted under Code

Start here

Usage

One import per component, and the shortest possible use — the package itself is installed once, on the start page.

Import this component

import { PctGrid } from '@pacit/components/grid';

Exported What it is

PctGridcomponentpct-grid A grid of equals that finds its own column count. The consumer states the one thing only they know — how narrow a card may get, --pct-grid-min-width — and the browser derives every "breakpoint" from it: columns drop one by one as the space runs out, down to a single column that never overflows. Responsive without a media query in consumer code, which is the third layout primitive's whole pitch (0057).

Exported	What it is
`PctGrid`component`pct-grid`	A grid of equals that finds its own column count. The consumer states the one thing only they know — how narrow a card may get, `--pct-grid-min-width` — and the browser derives every "breakpoint" from it: columns drop one by one as the space runs out, down to a single column that never overflows. Responsive without a media query in consumer code, which is the third layout primitive's whole pitch (0057).

<pct-grid>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</pct-grid>

Examples

Every state, running

Each example is the component itself, not a screenshot. Open the code under any of them.

Cards that decide their own count

--pct-grid-min-width is the smallest a cell may be; the grid fits as many as the container allows and wraps the rest. No breakpoints — the container is the question.

Container

Stack

Grid

Theme

Button

Tabs

API

What it reads, and what it writes back

Read from the source at build time — the types, the defaults and the lines of documentation are the library's own.

A grid of equals that finds its own column count. The consumer states the one thing only they know — how narrow a card may get, --pct-grid-min-width — and the browser derives every "breakpoint" from it: columns drop one by one as the space runs out, down to a single column that never overflows. Responsive without a media query in consumer code, which is the third layout primitive's whole pitch (0057).

Inputs

Name	Type	What it does
No inputs — the element is configured by its content.

Outputs

None of its own. The native events — (click), (focus), the form's submit — are the platform's, and two-way models above carry the rest.

What it writes on the element

The hooks a stylesheet or a test can hold. Stable by contract — the parts inventory gate fails the build when one disappears.

Attribute	Bound to	Note
`class`	`pct-grid`

Styling

Parts to select, tokens to override

Two ways in, both stable. No class names to depend on.

Parts

In a test, PctGridHarness from @pacit/components/testing reads a part by the name below and a state by its attribute — the harness gate holds the names to the package.

No parts of its own — the element you write is the whole of it.

Tokens

Every value the component reads, with the light and the dark default. Override a token at any scope and it cascades like any custom property.

Token	Styles
`--pct-grid-gap{pct.space.5}`16px	Gap between the grid's cells.
`--pct-grid-min-width`16rem	Minimum width of a cell before the grid wraps.

Theming

A brand override in a few declarations. Scope it to a theme attribute, a page or one container — the component never notices.

[data-theme='brand'] {
  --pct-grid-min-width: 12rem;
  --pct-grid-gap: 24px;
}

One

Two

Three

Four

Five

Six

Accessibility

Measured, not assumed

Pattern: none — layout is presentational and this host carries no ARIA at all (0057). In particular it is not role="grid": that role names a keyboard-walked widget of cells, and calling a card layout a grid widget is a claim screen-reader users pay for. The unit suite pins the absence. Named in the class JSDoc.

Evidence

What the repository holds for this component

Read at build time from the tracked snapshots, not typed here.

—mutation scoreno mutants to kill — the policy says why

7 × 3e2e cases × enginesplus the shared audits: axe, forced colors, preferences, size, hydration

0colour pairs measuredlight and dark, at every token build

0visual baselinesChromium, the sandbox's own pictures

7elements in the preview0 listeners · 1 render to settle · 1401 µs in jsdom, held exactly but for the clock

Why it is built this way

The third layout primitive (0057), and the whole of it is one declaration: repeat(auto-fit, minmax(min(100%, var(--pct-grid-min-width)), 1fr)). The consumer states the one thing only they know — how narrow a card may get — and the engine derives every "breakpoint" from it. Responsive without a media query in consumer code, or in this component's own: the e2e suite watches the column count change with the viewport while the stylesheet names no width anywhere.

Known limitations

Equal columns only. No spans, no featured-card-twice-as-wide, no masonry — those are layouts with opinions about content, and this grid has exactly one opinion: a minimum. A page needing spans writes its own grid-template-areas where it can see them.
A single child stretches full width. auto-fit collapses the empty tracks, so one card in a wide grid is one wide card. That is the declaration's honest reading, recorded so nobody files it as a bug.
DOM order is visual order, always. The grid never reorders, so the tab sequence and the reading sequence stay the document's — which is a limitation only for designs that wanted them to differ, and those pay for it in any layout system.

pacit

Usage

Every state, running

Cards that decide their own count

What it reads, and what it writes back

Inputs

Outputs

What it writes on the element

Parts to select, tokens to override

Parts

Tokens

Theming

Measured, not assumed

Keyboard

What is measured, and what is not yet

What the repository holds for this component

Why it is built this way

Known limitations