Izgara sistemi ve modülerlik

1) Neden örgü

• Tasarım ve geliştirmeyi hızlandırır (ortak dil: "12 sütun, oluk 24"),
• Bilişsel yükü azaltır (hatta ritim, sabit çizgiler),
• Sayfalar arasındaki bileşenlerin taşınabilirliğini artırır
• "microlaying" olmadan modüler bir kütüphane oluşturmanıza izin verir.

2) Temel örgü elemanları

Konteyner - maksimum içerik genişliği, ortalanmış alan.
Sütunlar - modülleri yerleştirmek için dikey alanlar.
Oluk - sütunlar arasında yatay boşluk.
Kenar boşluğu - konteynerin solundaki/sağındaki dış alanlar.
Satır/Parça - yatay kılavuz (CSS Izgarasında - çizgiler/izler).
Satır taban çizgisi - dikey tipografi ızgarası.

Önerilen dikey ritim: 8-pt (bazen nüanslar için 4-pt), boyut birimleri ve girintiler 4/8'in katlarıdır.

3) Kesme noktaları ve konteynerler

• Raster konteyner (düzeltmek. maksimum genişlikte) büyük ekranlarda, akışkan - mobilde.
• Oluk, büyük kesme noktalarına sorunsuz bir şekilde artabilir.
• Sütunlar - 4/6/8/12 "çekirdek set'olarak.

4) Modülerlik ve yoğunluklar

Modül - 1..N sütunları ve taban çizgisi yüksekliklerinin katlarını kaplayan bir içerik bloğu.

• Konfor (gösterge panoları, okuma): daha büyük yazı tipleri, girintiler 16-24.
• Kompakt (tablolar, pro-mode): fontlar + 0/ − 1 piksel, dikey girintiler − 4/ − 8, satır yükseklikleri sabittir (8'in katları).

Bileşenler minimum yoğunlukta iki ön ayara sahip olacaktır.

5) Tipografi ve taban çizgisi ızgarası

Temel satır yüksekliğini seçin (örneğin, 24 px) ve öğelerin yüksekliklerini senkronize edin (px 40/48/56 düğmeler taban çizgisinin katlarıdır).
Başlıklar dikey ritimleri tutturur: Girintilerin üstü/altı 8'in katlarıdır.
Simgeleri metnin yüksekliğine hizalayın.

6) Düzen şablonları

6. 1 Kartlar

Izgara: mozaik (düzeltme. kart genişliği) veya sütun (kart = N sütun).
Yükleme sırasında "atlama" önlemek için minimum içerik yükseklikleri; kartın içindeki iskelet.
Dahili dolgu: Kesme noktasına bağlı olarak 16/20/24.

6. 2 Tablo

Tam genişlikte konteyner; Yatay olarak kaydırırken ilk sütunu/kapağı dondurun.
Hücreler taban çizgisi katlıdır; Sayısal sütunlar basamak/ondalık sayılarla hizalanır.
XS'de - çok fazla sütun varsa yatay kaydırma yerine "yığılmış düzen".

6. 3 Formlar

XS/SM'de tek sütunlu, MD +'da iki veya üç sütunlu (sekmelerin/bölümlerin mantığını dikkate alarak).
Alan + etiket + yardım metni ortak bir modüle sığar (yükseklikler 8'in katlarıdır).

6. 4 Gösterge Panoları

Stabilite için sabit parçalar ve bulutlar (alanlar) ile ızgara.
Widget'lar sütunlarda minimum ve maksimum genişliklere sahiptir; Yükseklikler taban çizgisinin katlarıdır.
Yeniden gönderirken - sütun sayısı değişir, widget'ları keyfi olarak bölmeyin.

7) Uyarlanabilirlik, otomatik düzen ve davranış

Izgaranın önündeki içerik: Izgara, içeriği kırmak yerine ona göre ayarlanır.

• Kısıtlamalar (sol/sağ/merkez) ve kartlar/listeler için otomatik düzen kullanın.
• XS/SM/MD/LG için destek bileşeni seçenekleri (dolgular değişir, yuva sırası).

• Bölüm düzeyinde - CSS Izgarası (alanlar, sütunlar, satırlar).
• Bileşenlerin içinde - Flex (eksenler, boşluk dengesi).

8) CSS Izgara/Flex - Atölye

css
.container {
max-width: 1280px; margin: 0 auto; padding: 0 16px;
display: grid; gap: 24px;
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.col-4 { grid-column: span 4; }
@media (max-width: 1199px) {
.container { grid-template-columns: repeat(8, 1fr); gap: 20px; }
.col-4 {grid-column: span 8; }/full-width card/
}
@media (max-width: 839px) {
.container { grid-template-columns: repeat(6, 1fr); gap: 16px; }
}
@media (max-width: 599px) {
.container { grid-template-columns: repeat(4, 1fr); }
}

css
.dashboard {
display: grid; gap: 24px;
grid-template:
"kpi kpi chart chart" auto
"tbl tbl chart chart" 1fr / 1fr 1fr 1fr 1fr;
}
.kpi  { grid-area: kpi; }
.chart { grid-area: chart; }
.tbl  { grid-area: tbl; }
@media (max-width: 1199px) {
.dashboard { grid-template:
"kpi" auto "chart" auto "tbl" 1fr / 1fr; }
}

9) Girintiler ve belirteçler

Tasarım sistemindeki ölçekleri yakalayın.

json
{
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32, "3xl": 48 },
"container": { "sm": 584, "md": 808, "lg": 1152, "xl": 1320 },
"gutter": { "sm": 16, "md": 20, "lg": 24, "xl": 32 },
"columns": { "xs": 4, "sm": 6, "md": 8, "lg": 12 }
}

• Bileşenlerin iç girintileri "uzaydan" gelmektedir.
• Konteynerlerin dış alanları 'oluk'/' marj' şeklindedir.
• Eleman yükseklikleri 8'in katlarıdır (40/48/56).

10) Modüler bileşenler

• Her kesme noktasında kaç sütun aldığını bilin;
• Minimum/maksimum boyutlara sahiptir;
• "Sihirli" piksellere bağımlı olmayın - sadece belirteçler;
• İç ızgarayı (başlık, içerik, altbilgi) satır taban çizgisinde tutun.

11) Görüntüler ve medya bölümleri

En boy oranını düzeltin (örn. 16/9, 4/3, 1/1) önizlemeler ve kartlar için.

css
.media { aspect-ratio: 16 / 9; object-fit: cover; }

XS'de, yalnızca promosyon için tam taşma payı (kenarların etrafındaki resim) kullanın, içeriğin geri kalanı kabı takip eder.
Görüntü metni - yalnızca slips/bindirmelerde, kontrast ≥ AA.

12) RTL ve yerelleştirme

Izgara yönü aynalar:'dir = 'rtl've': dir (rtl) '-girintiler/simgeler için rüller.
Tablolardaki sütun sırası ve dondurulmuş sütunlar - yansıtmayı düşünün.
Hatların ve transferlerin uzunluğu modüllerin yüksekliklerini değiştirebilir - stokları yatırın.

13) iGaming'in özellikleri

Promosyon alanları ve afişler: büyük modüller ile ayrı bir ızgara; Metin her zaman plakadadır, kritik bildirimler için AAA kontrastı (18 +, limitler, riskler).
Liderler/derecelendirmeler: sabit bir ilk sütun ve yapışkan bir başlık içeren tablolar, tablo numaraları (tablo-sayılar), satır yükseklikleri 8'in katlarıdır.
Oyuncu/operasyon panoları: widget'lar (oturumlar, para yatırma, RTP, Net Para Yatırma) 12 ızgarada 3-6 sütun işgal eder; MD/SM'de kademeli yeniden oluşturma.
Turnuva kartları: 3 × N (LG), 2 × N (MD), 1 × N (SM/XS) kartlarının ızgarası; CTA kalıcı bir yerde.

14) Erişilebilirlik ve odaklanma

Odak halkaları ritmi bozmamalıdır: anahat-ofset veya dahili bir sözde eleman ekleyin.
Minimum tıklama boyutu: 44 × 44 (mobil )/32 × 32 (masaüstü).
Anlamı sadece yerleştirme ile kodlamayın; Metin etiketlerini ve aria niteliklerini kaydedin.

15) Performans

Yuvalama ızgaralarının derinliğini azaltın: 1 ana ızgara bölümü + içinde esner.
Yüzlerce kartta ağır gölgelerden/maskelerden kaçının; Listelerde düz stilleri kullanın.
Medya içeriğinin tembel yüklenmesi; Sabit oranlar CLS'yi önler.

16) Antipatterns

"Grid to taste" tutarlılığı - her sayfada ufalanır.
Oluk bölümlere göre keyfi olarak değişir.
Tutarsız yoğunluklar (bir ekranda hem kompakt hem de konfor).
Sihirli genişliğe bağlı bileşenler (sütun/belirteç yok).
Alternatif düzen olmadan mobilde yatay kaydırmalı tablolar.
Kalıp ve kontrast kontrolü olmadan görüntüdeki metin.

17) KG kontrol listesi

Yapı

• Sütunlar/konteyner/margines kesme noktalarına karşılık gelir.
• Oluk sayfa içinde kararlıdır.
• Yükseklikler ve girintiler 8'in katlarıdır.

Bileşenler

• Sütun genişlikleri (XS.. XL) ve min/max tanımlanmıştır.
• İç ızgaralar taban çizgisiyle hizalanmıştır.

Tablolar/Formlar

• Yapışkan kapak/ilk sütun; XS'de yığılmış mod.
• Form alanları taban çizgisinin katlarıdır; etiket/yardım metni "atlama" yapmaz.

A11y

• Odak stilleri ritmi bozmaz; Klik bölgeleri minimum ≥.

Performans

• Medya blokları nedeniyle CLS yok; Tembel yükleme etkinleştirildi.

18) Tasarım sistemindeki belirteçler ve belgeler

• 'container', 'columns', 'gutter', 'space', baseline değerleri;
• Düzen örnekleri (kartlar/tablolar/formlar/gösterge tabloları);
• Yoğunluk hazır ayarları (Comfort/Compact) ve bileşenler üzerindeki etkileri;
• CSS Grid/Flex ve Figma stilleri/düzenleri için kod parçacıkları.

Kısa Özet

Grid, tasarım ve geliştirme arasındaki bir sözleşmedir. Kesme noktaları, kaplar, hoparlörler ve 8-pt ritim, tasarım belirteçleri ve düzen şablonları yakalayın, yoğunluk seçenekleri, uyarlanabilirlik ve kullanılabilirlik sağlayın. Ardından sayfalar tahmin edilebilir şekilde ölçeklenir, bileşenler yeniden kullanılır ve komut daha hızlı ve daha kararlı olur.