UI grid sistemi, öğeleri aynı çizgilere oturtmaktan daha fazlasıdır. Sayfanın maksimum içerik genişliğini, dış margin’leri, kolonlar arası gutter’ı, component’lerin kaç track kapladığını ve ekran daraldığında hangi ilişkinin değişeceğini tanımlar. 12 kolon kullanmak zorunlu değildir; doğru grid, içerik ve ürün davranışını en az istisnayla taşıyan grid’dir.
Grid’in temel parçaları: margin, kolon, gutter ve content width
| Parça | Görevi |
|---|---|
| Outer margin | İçeriği viewport kenarından ayırır |
| Column / track | Component’lerin yatay alanını tanımlar |
| Gutter / gap | Kolonlar ve öğeler arasındaki kontrollü boşluğu oluşturur |
| Max content width | Ultrawide ekranda içeriğin gereksiz yayılmasını sınırlar |
| Span | Bir component’in kaç kolon/track kapladığını tanımlar |
Bu değerler tek başına tasarım sistemi değildir. Örneğin 12 kolon tanımlayıp bütün component’leri yine rastgele width ve margin ile yerleştiriyorsan grid yalnız görsel overlay olarak kalır. Gerçek sistemde hero, article body, card grid, form ve footer gibi yüzeyler aynı alignment mantığını paylaşır.
12 kolon neden popüler ve neden zorunlu değil?
12 sayısı 2, 3, 4 ve 6’ya bölünebildiği için çok sayıda kolon kombinasyonu sunar; bu yüzden responsive web arayüzlerinde pratik olabilir. Fakat tek kolonlu editorial site, dashboard veya çok özel content layout için 4, 6, 8 ya da tamamen fluid track sistemi daha sade olabilir.
| Senaryo | Mantıklı başlangıç |
|---|---|
| Editorial/article layout | 1 ana content track + optional rail |
| Marketing site | 6–12 kolon arası esnek page grid |
| Dashboard | Component yoğunluğuna göre 12+ track veya CSS minmax yaklaşımı |
| Mobile | Çoğu zaman 1–4 kolonlu daha basit ilişki |
Page grid ve component grid’i ayır
Sayfanın dış grid’i ile kartın iç layout’u aynı seviyede değildir. Page grid section’ların ana hizasını yönetir; component grid ise kartın image, badge, title, meta ve action ilişkisini yönetir. Her küçük element’i global 12-col guide’a bağlamak hem implementation’ı hem responsive davranışı gereksiz zorlaştırır.
- Page wrapper’ı tanımla
Max width, outer margin ve ana kolonları belirle.
- Section span’lerini belirle
Hero, text, media, sidebar gibi major blocks kaç track kaplayacak?
- Component kendi iç sistemini kullansın
Card veya form global kolon sayısına bağımlı olmak zorunda değil.
- Alignment anchor’larını paylaş
Başlık, body copy, media edge ve CTA gibi tekrar eden çizgileri sistem genelinde tutarlı yap.
Responsive grid kolon sayısını küçültmekten fazlasıdır
Desktop 12 kolon → tablet 8 → mobile 4 modeli kullanılabilir ama responsive grid’in özü bu sayı dizisi değildir. Asıl soru: hangi content relationship mevcut width’te artık iyi çalışmıyor? İki kolonlu feature section mobilde tek kolona geçebilir; üç kart grid’i `minmax()` benzeri fluid mantıkla 3→2→1 akabilir.
MDN, CSS Grid’in iki boyutlu layout ve flexible track sistemi sunduğunu, `fr`, `minmax()` ve auto-placement ile responsive düzenlerin daha az cihaz-özel kural kullanarak kurulabildiğini gösteriyor. Tasarım dosyasında da aynı zihniyet yararlı: fixed device preset yerine minimum component width ve ideal content width tanımla.
Gutter ve margin için tek sabit sayı kullanmak zorunda değilsin
Grid spacing’in amacı her boşluğu eşit yapmak değil, ritim ve ilişki üretmektir. Page outer margin, column gutter ve component internal padding aynı spacing scale’den türeyebilir ama aynı değer olmak zorunda değildir.
| Katman | Örnek yaklaşım |
|---|---|
| Page margin | Viewport’a göre fluid/clamp veya breakpoint bazlı |
| Column gutter | Grid yoğunluğuna göre daha sabit |
| Card padding | Component token’ı |
| Section vertical gap | İçerik grubuna göre daha büyük scale |
Grid’i ne zaman bilinçli kırmak gerekir?
Her şey tam kolon çizgilerine oturursa interface düzenli ama monoton olabilir. Hero image’ın wrapper dışına taşması, pull quote’un bir kolon breakout yapması veya editorial media’nın full-bleed olması görsel vurgu yaratabilir. Fakat “grid kırmak”, aslında hangi temel alignment’a geri döneceğini bildiğinde güçlüdür.
- Hero/media breakout: ana text grid’i korunurken image daha geniş olabilir.
- Full-bleed section: edge-to-edge background içinde content yeniden wrapper’a dönebilir.
- Editorial pull quote: bir veya iki track taşabilir ama reading order değişmemeli.
- Asymmetric card: internal grid kırılabilir, fakat neighboring cards ile dış alignment korunmalı.
Grid ile DOM/source order’ı karıştırma
CSS Grid öğeleri görsel olarak farklı konumlara taşıyabilir. MDN accessibility rehberi, visual reordering’in screen reader veya keyboard tab order’ını otomatik değiştirmediğini açıkça uyarır. Bu nedenle CSS placement, mantıksal içerik sırasını düzeltmenin yerine kullanılmamalıdır.
Özellikle dashboard ve editorial layout’ta `grid-auto-flow: dense` gibi teknikler görsel boşlukları doldurabilir; fakat item’ların anlamlı sırası varsa kullanıcı farklı navigation order yaşayabilir. Kaynak sırası önce doğru olmalı; grid onun görsel sunum katmanı olmalı.
Grid token’larını design system’e nasıl bağlarsın?
| Token | Amaç |
|---|---|
| --page-max | Ana content wrapper maksimum genişliği |
| --page-pad | Viewport kenar padding’i |
| --grid-gap | Ana column gap |
| --content-narrow | Okuma metni maksimum genişliği |
| --content-wide | Media/case-study genişliği |
Figma değişkenleri veya CSS custom property isimleri aynı olmak zorunda değil; önemli olan tasarım ile implementation arasında ortak concept vocabulary olmasıdır. “Bu section 1140px çünkü öyle çizdim” yerine “wide content token kullanıyor” demek sistemi daha taşınabilir yapar.
UI grid audit checklist
- Alignment anchor’larını bul
Başlıklar, body, media ve CTA gerçekten ortak çizgiler paylaşıyor mu?
- Kolon sayısını sorgula
Kullanılmayan kolonlar varsa sistem gereğinden karmaşık mı?
- Component minimum width test et
Grid hangi genişlikte gerçekten kırılıyor?
- Mobile source order kontrol et
Visual placement DOM mantığını bozmuyor mu?
- Breakout istisnalarını say
Her section farklı şekilde grid kırıyorsa artık grid sistemi yok demektir.
- Implementation eşleşmesini test et
Figma guide’ı CSS’te gerçek track/gap davranışına çevrilebiliyor mu?