Live Docs

Layout /

stable

Grid

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

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

Overview

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

Examples

Basic 3 columns

A

B

C

<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=1

gap=6

gap=6

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

Props

PropTypeDefaultDescription
asElementType"div"Render as tag lain.
cols1 | 2 | 3 | 4 | 5 | 6 | 121Jumlah kolom default.
mdCols2 | 3 | 4 | 6 | 12Jumlah kolom di breakpoint md.
lgCols2 | 3 | 4 | 6 | 12Jumlah kolom di breakpoint lg.
gap"0" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12""4"Skala jarak antar sel.

Tokens Used

--space-*

Mapping gap spacing scale

--breakpoint-md/lg

Switch kolom responsif

Accessibility

  • Urutan DOM tetap menentukan urutan baca screen reader meski tampilan berbentuk grid.
  • Pastikan konten tiap sel tetap bermakna saat dibaca linear (mobile/assistive tech).