A CSS grid layout primitive that arranges children into equal-width tracks by column count, or auto-fills tracks of a minimum width, with a consistent gap scale.
import { Grid } from "@/components/ui/grid";
const tile = (n: number) => (
<div
key={n}
style={{
display: "grid",
placeItems: "center",
padding: "var(--bs-space-3)",
background: "var(--bs-color-surface-3)",
border: "1px solid var(--bs-color-border)",
fontSize: "var(--bs-font-size-sm)",
color: "var(--bs-color-text-secondary)",
}}
>
{n}
</div>
);
const tiles = (count: number) =>
Array.from({ length: count }, (_, i) => tile(i + 1));
export default function GridLooseGapDemo() {
return (
<div
style={{
width: "100%",
padding: "var(--bs-space-6)",
background: "var(--bs-color-surface)",
color: "var(--bs-color-text-primary)",
}}
>
<Grid columns={3} gap="xl">
{tiles(3)}
</Grid>
</div>
);
}
