Grid

Primitive layout 2D berbasis kolom dengan dukungan responsive cols untuk md/lg breakpoint.

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

Gunakan Grid untuk susunan kartu/list multi-kolom. Kombinasikan cols + mdCols + lgCols agar responsif.

Basic 3 columns

<Grid cols={3} gap="3">
  <Card>A</Card>
  <Card>B</Card>
  <Card>C</Card>
</Grid>

Responsive columns

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

<Grid cols={1} mdCols={2} lgCols={4} gap="3">...</Grid>

Different gap scale

gap=1

gap=6

<Grid cols={2} gap="1">...</Grid>
<Grid cols={2} gap="6">...</Grid>

Prop	Type	Default	Description
as	`ElementType`	`"div"`	Render as tag lain.
cols	`1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 12`	`1`	Jumlah kolom default.
mdCols	`2 \| 3 \| 4 \| 6 \| 12`	—	Jumlah kolom di breakpoint md.
lgCols	`2 \| 3 \| 4 \| 6 \| 12`	—	Jumlah kolom di breakpoint lg.
gap	`"0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "8" \| "10" \| "12"`	`"4"`	Skala jarak antar sel.

--space-*

Mapping gap spacing scale

--breakpoint-md/lg

Switch kolom responsif