GridLayout

PreviousNext

Responsive CSS grid.

import { GridLayout } from "@/rl-ui";

<GridLayout columns={3} gap="4">
<div>One</div>
<div>Two</div>
<div>Three</div>
</GridLayout>

Examples

Two columns

import { GridLayout, Badge } from "@/rl-ui";

<GridLayout columns={2} gap="3">
<Badge color="blue">Left</Badge>
<Badge color="green">Right</Badge>
</GridLayout>

API

PropTypeDefaultDescription
columnsnumber | string—Column track definition.
rowsnumber | string—Row track definition.
gapstring—Gap token.
align"start" | "center" | "end" | "stretch"—Align items.
justify"start" | "center" | "end" | "between" | "around" | "evenly" | "stretch"—Justify items.