Grid
import { Grid } from "@combric/react";
export function Example() {
return <Grid minItemWidth="sm" gap="3"><article>First</article><article>Second</article><article>Third</article></Grid>;
}Grid
Intrinsic responsive grid or explicit one-to-four columns.
@combric/layout · v1.1.1 · Current
Import and usage
import { Grid } from "@combric/react";The framework-independent CSS contract is available from@combric/layout/css; the React wrapper comes from@combric/react.
Examples
Explicit columns
import { Grid, Stack } from "@combric/react";
export function Example() {
return <Stack gap="3"><Grid columns={2} gap="2"><article>Two columns</article><article>Two columns</article></Grid><Grid columns={3} gap="2"><article>Three</article><article>Three</article><article>Three</article></Grid><Grid columns={4} gap="2"><article>Four</article><article>Four</article><article>Four</article><article>Four</article></Grid></Stack>;
}Native CSS and Tailwind adapter
Both previews use the same canonical content. Native CSS is the default; the Tailwind adapter is optional.
Responsive grid — Native CSS
@import "@combric/layout/css";
<div class="combric-grid" data-min-item-width="sm" data-gap="3">
<article>First</article>
<article>Second</article>
<article>Third</article>
</div>Responsive grid — Tailwind adapter
@import "tailwindcss/theme.css" layer(theme);
@import "@combric/tailwind";
@import "tailwindcss/utilities.css" layer(utilities);
<div class="grid grid-combric-auto-sm gap-combric-3">
<article>First</article>
<article>Second</article>
<article>Third</article>
</div>Public API
| Name |
|---|
Grid |
| Contract |
|---|
| minItemWidth: sm | md | lg |
| columns: 1 | 2 | 3 | 4 |
| gap |
Accessibility
Layout changes presentation only. Choose semantic elements and preserve meaningful source order; Combric does not add ARIA, reorder content, or measure the viewport.