TMS Grid

TMSGrid arranges repeated content in a responsive flex grid. The columns prop sets the widest layout, then the grid steps down at smaller breakpoints before stacking.

Usage

One

Two

Three

<TMSGrid
  columns="3">
  <!-- box-count="auto" -->
  <TMSBox type="title">One</TMSBox>
  <TMSBox type="title">Two</TMSBox>
  <TMSBox type="title">Three</TMSBox>
</TMSGrid>

source |

Props

Prop	Type	Default	Notes
columns	1 | 2 | ... 6	1	Sets the maximum column count on the widest breakpoint.

Slots

Slot	Notes
default	Grid content.

INFO

The examples use TMSBox to make the column behavior visible. TMSGrid can wrap any slotted content; each child owns its own visual treatment.

Variables

TMSGrid exposes layout and density variables that child components can opt into:

Variable	Purpose
--tms-grid-gap	Gap between grid children.
--tms-grid-item-font-size	Suggested text size for grid-aware children.
--tms-grid-item-line-height	Suggested line height for grid-aware text.

TMSBox uses these variables when it is rendered inside TMSGrid, while preserving its standalone defaults outside a grid.

.my-grid-item {
  font-size: var(--tms-grid-item-font-size, 1.25rem);
  line-height: var(--tms-grid-item-line-height, 1.1);
}