CSS Grid

Q: CSS Grid'de 1fr ne anlama gelir?

fr, grid kapsayıcısındaki boş alanın bir kesrini ifade eder. grid-template-columns: 1fr 1fr 1fr ile kullanılabilir genişlik üç eşit sütuna bölünür; 2fr ise 1fr'ın iki katı pay alır.

Güncellendi 30 Eylül 20262 dk okuma

Kısaca

CSS Grid, öğeleri aynı anda satır ve sütunlar halinde düzenleyen, karmaşık sayfa yerleşimlerini kolayca kurmayı sağlayan iki boyutlu CSS yerleşim sistemidir.

CSS Grid nedir?

Resmî adı CSS Grid Layout modülü olan CSS Grid, bir kapsayıcıyı satırlara ve sütunlara bölmenizi ve çocuklarını ortaya çıkan hücrelere yerleştirmenizi sağlar. Bir üst öğede display: grid ile etkinleştirirsiniz ve her doğrudan çocuk bir grid öğesi olur. Tüm modern tarayıcılarda desteklenir ve üst bilgi, kenar çubuğu, ana içerik ile alt bilgiden oluşan sayfa düzeyindeki yerleşimler için standart araçtır.

Izgara izlerini (track) grid-template-columns ve grid-template-rows ile tanımlarsınız, gap ise aralarındaki boşluğu belirler. fr birimi artan alanı paylaştırır; yani 1fr 2fr ikinci sütunu birincinin iki katı genişliğinde yapar, repeat(auto-fill, minmax(200px, 1fr)) ise sığdığı kadar sütun oluşturarak tek bir media query olmadan duyarlı bir kart ızgarası sağlar. Öğeler grid-column: span 2 ile birden çok ize yayılabilir ya da grid-template-areas ile çizilen adlandırılmış bölgelere yerleştirilebilir; subgrid ise iç içe öğelerin üst öğenin izleriyle hizalanmasını sağlar.

CSS Grid bir milimetrik kâğıt gibidir: önce satır ve sütunları çizer, sonra her içerik parçasının hangi hücreleri kaplayacağına karar verirsiniz. Yapı üst öğenin CSS'inde durduğu için tüm sayfayı küçük ekranlar için, HTML'e dokunmadan, bir media query içindeki birkaç satırı değiştirerek yeniden düzenleyebilirsiniz.

Klasik karışıklık CSS Grid ile Flexbox arasındadır. Flexbox tek boyutludur: öğeleri tek bir satır ya da sütun boyunca yerleştirir ve yerleşimi içeriğin boyutunun belirlemesine izin verir. Grid ise iki boyutludur ve yerleşim önceliklidir: yapıyı siz tanımlar, içeriği ona yerleştirirsiniz. Çoğu site ikisini de kullanır; genel sayfa için Grid, gezinme çubuğu gibi bir bileşenin içindeki öğeleri hizalamak için Flexbox.

Önemli noktalar

display: grid bir öğeyi grid kapsayıcısı, doğrudan çocuklarını grid öğesi yapar.
Grid satırları ve sütunları aynı anda denetler; yani iki boyutludur.
fr birimi, repeat() ve minmax() esnek, duyarlı izler oluşturur.
grid-template-areas, yerleşimin bölgelerini adlandırmanıza ve öğeleri adlarıyla yerleştirmenize izin verir.
Genel sayfa yapısı için Grid, tek boyutlu hizalama için Flexbox kullanın.

Örnek

Bir sayfa yerleşimi ve duyarlı bir kart ızgarasıcss

/* A page layout with named areas */
.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
  gap: 1rem;
}
.page > header { grid-area: header; }
.page > aside  { grid-area: sidebar; }
.page > main   { grid-area: main; }

/* Cards: as many columns of at least 200px as fit */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }

Sık sorulan sorular

CSS Grid ile Flexbox arasındaki fark nedir?

CSS Grid iki boyutludur ve satırları ile sütunları birlikte denetler; bu da tüm sayfa yerleşimlerine uygundur. Flexbox ise tek boyutludur ve öğeleri tek bir satır ya da sütun boyunca düzenler; bu da araç çubukları ve menüler gibi bileşenlere uygundur.

CSS Grid'de 1fr ne anlama gelir?

fr, grid kapsayıcısındaki boş alanın bir kesrini ifade eder. grid-template-columns: 1fr 1fr 1fr ile kullanılabilir genişlik üç eşit sütuna bölünür; 2fr ise 1fr'ın iki katı pay alır.

CSS Grid tüm tarayıcılarda destekleniyor mu?

Evet. Tüm modern tarayıcılar CSS Grid'i 2017'den beri destekliyor; iç içe grid'lerin üst öğeyle hizalanmasını sağlayan subgrid ise 2023 sonundan beri tüm büyük tarayıcılarda mevcut.

Sık karşılaştırılanlar

CSS Grid vs FlexboxCSS Grid öğeleri iki boyutta, satır ve sütunlara aynı anda yerleştirir; Flexbox ise onları tek bir satır ya da sütun boyunca dizer, bileşen içinde idealdir.

İlgili sayfalar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin