Component

ColumnTally

Each award adds a real CSS grid column to the children, reflowing the group through increasingly official arrangements. The final four-column allocation is no more useful than the first.

Possible use

It could let a reviewer award a handoff brief one column per approval, or let a presenter make agenda fields earn the right to sit beside one another. Neither use improves the information architecture.

Reasonable alternative

A reasonable local alternative is choosing the grid columns in CSS or rendering the intended layout directly. A tally turns a layout decision into a progress ceremony.

01 / Preview

Try it yourself.

01Title

02Status

03Owner

04Due date

Mechanism

1: Begin with four fields in one narrow column.
2: Award a column to reflow the actual children.
3: Return to one column when the layout ceremony has gone far enough.

02 / Usage

Put it somewhere.

example.tsxTSX

import { ColumnTally } from "gra-ui";
import "gra-ui/styles.css";

export function TalliedFields() {
  return (
    <ColumnTally>
      <span>Title</span>
      <span>Status</span>
      <span>Owner</span>
      <span>Due date</span>
    </ColumnTally>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content reflowed through one to four actual grid columns.