Grid

Install commands are on Home, attached from the registry - they are not written here, because a second copy is a copy that goes stale. This tab starts after the install worked.

Use it

import { Grid } from "@sushindustries/ui";

export function Example() {
	return (
		<Grid min="14rem" gap={4}>
			<div className="card p-4">One</div>
			<div className="card p-4">Two</div>
			<div className="card p-4">Three</div>
		</Grid>
	);
}

What you should see

Three boxes side by side, each at least 14rem wide, sharing whatever space is left over. Narrow the window and they wrap - two per row, then one - without a visible jump at a fixed width, because auto-fit recomputes the count from whatever space GridGridA responsive grid with no breakpoints in it. One number decides the column count at every width.@sushindustries/ui · layout's own container has, not from the viewport.

If nothing happens

grid-auto, the class this component writes, comes from @sushindustries/atoms@sushindustries/atomsThe design tokens and the atomic utilities built on them. One stylesheet, no build step, no framework.package. Without that stylesheet loaded, the children still render, just stacked in document order rather than gridded - GridGridA responsive grid with no breakpoints in it. One number decides the column count at every width.@sushindustries/ui · layout sets no inline layout styles beyond the --grid-min custom property.