Foundations/Grid System
Grid System
● Ready Web Nuxt 4 + Mobile React Native
Sistem grid responsif 12-kolom untuk desktop dan struktur stack adaptif untuk mobile (React Native) dengan lebar kontainer maksimal 1720px.
Simulasi Grid 12 Kolom
1
2
3
4
5
6
7
8
9
10
11
12
Pola Pembagian Kolom Umum
col-span-6 (50%)
col-span-6 (50%)
col-span-4 (33.3%)
col-span-4 (33.3%)
col-span-4 (33.3%)
col-3 (25%)
col-3 (25%)
col-3 (25%)
col-3 (25%)
Standar Breakpoint & Margin
| Device Breakpoint | Viewport Width | Jumlah Kolom | Gutter |
|---|---|---|---|
| Mobile (xs) | < 640px | 4 Kolom | 12px |
| Tablet (sm/md) | 640px - 1024px | 8 Kolom | 16px |
| Desktop (lg/xl) | 1024px - 1440px | 12 Kolom | 24px |
| Wide Monitor (2xl) | > 1440px (Max 1720px) | 12 Kolom | 24px |