CSS Grid Nedir?
Kısa tanım
CSS Grid (CSS Grid Layout), öğeleri satırlar ve sütunlar halinde aynı anda düzenlemeye yarayan iki boyutlu bir CSS düzen modelidir. Bir kapsayıcıya display: grid verilerek sütun ve satır izleri tanımlanır; alt öğeler bu izlere otomatik olarak veya satır ve sütun numaralarıyla yerleştirilir. Sayfa iskeletleri, kart listeleri ve hizalaması önemli karmaşık düzenler için Flexbox'tan daha uygundur.
Diğer adları: CSS Grid Layout, grid layout, display: grid, CSS ızgara düzeni
İzler, çizgiler ve fr birimi
Grid'de düzen önce kapsayıcıda tanımlanır, öğeler sonra bu düzene yerleşir. Sütunlar ve satırlar iz (track), aralarındaki sınırlar çizgi (line) olarak adlandırılır ve numaralanır. fr birimi, sabit ölçüler ve boşluklar düşüldükten sonra kalan alanın bir payıdır:
.duzen {
display: grid;
grid-template-columns: 16rem 1fr 2fr; /* sabit + kalan alanın 1/3'ü + 2/3'ü */
gap: 1.5rem;
}
.vurgu {
grid-column: 2 / 4; /* 2. çizgiden 4. çizgiye: iki sütunu kaplar */
}Media query olmadan uyum sağlayan kart listesi
repeat(), minmax() ve otomatik yerleşim birleşince, sütun sayısını alan genişliğine göre kendisi belirleyen bir liste elde edilir:
.kartlar {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
gap: 1rem;
}Her kart en az 16rem genişliğinde olur ve sığabildiği kadar sütun açılır. İçteki min(16rem, 100%), çok dar ekranlarda kartın kapsayıcıdan taşmasını önler. auto-fill ile auto-fit arasındaki fark yalnızca öğe sayısı azken görünür: auto-fill boş sütunları yerinde tutar, auto-fit onları daraltıp mevcut kartları genişletir. Bu teknik pek çok breakpoint ihtiyacını ortadan kaldırır.
Alan adlarıyla sayfa iskeleti
grid-template-areas, düzeni neredeyse bir çizim gibi okunabilir kılar ve breakpoint'lerde yeniden düzenlemeyi kolaylaştırır:
.sayfa {
display: grid;
grid-template-areas:
"ust"
"icerik"
"yan"
"alt";
}
@media (width >= 60em) {
.sayfa {
grid-template-columns: 1fr 18rem;
grid-template-areas:
"ust ust"
"icerik yan"
"alt alt";
}
}
header { grid-area: ust; }
main { grid-area: icerik; }
aside { grid-area: yan; }
footer { grid-area: alt; }Subgrid: iç içe öğeleri hizalamak
Kartların başlık, metin ve buton bölümlerinin yan yana kartlarda aynı hizada durması klasik bir sorundur, çünkü her kart kendi içinde bağımsızdır. grid-template-rows: subgrid verilen bir alt öğe, kendi izlerini oluşturmak yerine üst grid'in izlerini kullanır; böylece farklı uzunluktaki metinlere rağmen butonlar aynı çizgiye oturur. MDN'e göre subgrid Eylül 2023'ten beri tüm büyük tarayıcılarda desteklenir. Bileşenin sayfa yerine kendi kapsayıcısına göre değişmesi gerekiyorsa grid, container query ile birlikte kullanılabilir.
Görsel sıra ile kaynak sırası
Grid, öğeleri HTML'deki sıralarından bağımsız olarak herhangi bir hücreye yerleştirebilir. Bu güç bir risk de taşır: klavyeyle gezinen ve ekran okuyucu kullanan kişiler içeriği görsel sıraya değil, kaynak koddaki sıraya göre deneyimler. Ekranda solda duran menü kodda en sonda ise Tab tuşu odak sırasını beklenmedik biçimde atlatır. Mantıklı okuma sırasını HTML'de kurmak ve grid'i yalnızca görsel düzen için kullanmak, web erişilebilirliği açısından güvenli yoldur.
Tek boyutlu hizalama işleri (bir buton grubu, bir navigasyon satırı) için Flexbox genellikle daha basit bir araçtır; tasarım tarafındaki sütun düzeninin kendisi ise grid sistemi maddesinde anlatılıyor.