Grid

Kart, istatistik ve kutucuk satırları için iki boyutlu bir CSS grid. Sabit bir kolon sayısı seç ya da kolonların minimum genişliğe göre auto-fit ile yerleşmesine izin ver.

<Grid>
<Box>1</Box>
<Box>2</Box>
<Box>3</Box>
<Box>4</Box>
<Box>5</Box>
<Box>6</Box>
</Grid>

Import

import { Grid } from "@merid/react";

Örnekler

Sabit kolonlar

columns 1 ile 6 arasında eşit kolon belirler (varsayılan 3). 640px ve altında sabit grid tek kolona düşer.

<Grid columns={4} gap={3}>
{items.map((item) => <Box key={item.id}>{item.label}</Box>)}
</Grid>

Auto-fit

minItemWidth, grid'i auto-fit'e geçirir: sığdığı kadar kolon açılır, her biri en az bu genişlikte olur. columns'u geçersiz kılar ve breakpoint gerektirmez.

<Grid minItemWidth={140} gap={4}>
{items.map((item) => <Box key={item.id}>{item.label}</Box>)}
</Grid>

API referansı

as verilmedikçe bir div render'lar; ref'ini iletir ve tüm HTML attribute'larını olduğu gibi geçirir.

Stil verme

Prop'lardan inline atanan component değişkenleri: --mrd-grid-gap, --mrd-grid-columns (sabit layout) ve --mrd-grid-min (auto layout).

@media (min-width: 1024px) {
  .dashboard.mrd-grid { --mrd-grid-columns: 4; }
}

Erişilebilirlik

• Grid yalnızca layout içindir ve rol eklemez; bir ARIA grid'i değildir. Öğe listesi için as="ul" ve li child'ları kullan.
• Öğeler DOM sırasıyla akar; klavye ve ekran okuyucu kullanıcıları için bu sıranın anlamlı kalmasını sağla.

Kullanım ilkeleri

İlgili sayfalar

• Stack: tek boyutlu layout.
• Card: grid'in olağan öğesi.
• Container: grid'in genişliğini sınırlar.