Skip to Content
DocumentationLayout PrimitivesResponsive Grid

Responsive Grid

Creates a responsive grid that automatically repeats columns based on the available inline size. Use it when you want card-like items to wrap into a simple grid without writing media queries.

Usage

<div data-unitone-layout="responsive-grid">
	<img src="..." alt="" />
	<img src="..." alt="" />
	<img src="..." alt="" />
</div>

Props

HTML -gap:{variation} / JSX gap={variation}

Gap.

Can be set from -3 to 7. For variations 2 and above, clamp is used to adjust the margins so that they do not become too large on small screens. If it is 1 or more, adding s will shrink it to size -1 on mobile. (e.g. 1s) If it is 2 or more, adding m will shrink it to size 1 on mobile. (e.g. 2m)

<div data-unitone-layout="responsive-grid -gap:-2">
	<img src="..." alt="" />
	<img src="..." alt="" />
	<img src="..." alt="" />
</div>

HTML -auto-repeat:{value} / JSX autoRepeat={value}

auto-fill / auto-fit

<div data-unitone-layout="responsive-grid -auto-repeat:auto-fill">
	<img src="..." alt="" />
	<img src="..." alt="" />
	<img src="..." alt="" />
</div>

HTML --unitone--column-min-width / JSX columnMinWidth={value}

min-width of each columns.

<div data-unitone-layout="responsive-grid" style="--unitone--column-min-width: 100px">
	<img src="..." alt="" />
	<img src="..." alt="" />
	<img src="..." alt="" />
</div>

HTML -divider:{variation} / JSX divider={variation}

stripe

<div data-unitone-layout="responsive-grid -divider:stripe">
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
</div>

stripe (Vertical)

<div data-unitone-layout="responsive-grid -divider:stripe-vertical">
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
</div>

divide (Vertical)

<div data-unitone-layout="responsive-grid -divider:divide-vertical">
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
</div>

underline

<div data-unitone-layout="responsive-grid -divider:underline">
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
</div>

bordered

<div data-unitone-layout="responsive-grid -divider:bordered">
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
</div>

HTML -stairs:{variation} / JSX stairs={variation}

Display the grid in a stairs manner.

Can be set from -3 to 7. For variations 2 and above, clamp is used to adjust the margins so that they do not become too large on small screens. If it is 1 or more, adding s will shrink it to size -1 on mobile. (e.g. 1s) If it is 2 or more, adding m will shrink it to size 1 on mobile. (e.g. 2m)

<div data-unitone-layout="responsive-grid -stairs:1">
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
</div>

HTML -stairs-up:{value} / JSX stairsUp={value}

The direction of stairs. Default is left.

left / right / up-down / down-up

left
<div data-unitone-layout="responsive-grid -stairs:1 -stairs-up:left" style="--unitone--column-min-width: 160px">
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
</div>
<div data-unitone-layout="responsive-grid -stairs:1 -stairs-up:right" style="--unitone--column-min-width: 160px">
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
</div>
up-down
<div data-unitone-layout="responsive-grid -stairs:1 -stairs-up:up-down" style="--unitone--column-min-width: 160px">
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
</div>
down-up
<div data-unitone-layout="responsive-grid -stairs:1 -stairs-up:down-up" style="--unitone--column-min-width: 160px">
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
	<div><img src="..." alt="" /></div>
</div>

HTML -container-type:{value} / JSX containerType={value}

Establishes the ResponsiveGrid as a query container for its descendants.

Currently supported values are:

  • inline-size
<div data-unitone-layout="responsive-grid -container-type:inline-size">
	<div>...</div>
</div>

HTML -responsive-context:{value} / JSX responsiveContext={value}

Sets the responsive context for descendants to container, the only supported value. It does not affect the Responsive Grid element itself. Use responsiveContext="container" together with containerType="inline-size" on this element (HTML: -responsive-context:container -container-type:inline-size). The default is viewport-based behavior, and there is no viewport override inside a container context. The context becomes active only when both markers are on the same element. If containerType="inline-size" is omitted, responsiveContext="container" is ignored and the existing responsive context remains active. See Responsive context utilities for examples.

Deprecated HTML -fluid-reference:{value} / JSX fluidReference={value}

Deprecated. Use responsiveContext="container" on an ancestor instead.

Uses a query container’s inline size as the reference for fluid typography, spacing, padding, and gutters.

Currently supported values are:

  • cqw

Place the ResponsiveGrid inside an ancestor with container-type: inline-size.

<div data-unitone-layout="responsive-grid -container-type:inline-size">
	<div data-unitone-layout="responsive-grid -fluid-reference:cqw">
		...
	</div>
</div>
Last updated on
ReelStack