CSS grid'de bir öğeyi ızgarada istediğiniz yere koymanın üç yolu vardır: çizgi numaralarıyla (grid-column: 1 / 3), adlandırılmış çizgilerle (grid-column: icerik-start / icerik-end) ve adlandırılmış alanlarla. Son yöntemde öğeye grid-area: baslik gibi bir ad verir, kapsayıcıda ise grid-template-areas ile düzenin bir tür metin çizimini yaparsınız. Üç yöntem birbirinin yerine ya da birlikte kullanılabilir, çünkü sonuçta hepsi aynı çizgilere dayanır.

Bu yazıda çizgi numaralandırmasını, grid-column, grid-row ve grid-area kısaltmalarını, span anahtar sözcüğünü, negatif çizgi numaralarını, çizgi adlarını ve grid-template-areas ile kurulan düzenleri ele alıyoruz. İz tanımlama, fr ve gap gibi temel kavramlar CSS grid rehberi yazısında, yerleşim bilgisi verilmemiş öğelerin nereye gittiği ise otomatik yerleşim yazısında anlatılıyor. Serinin bütünü için CSS öğrenme rehberi sayfasına bakabilirsiniz.

Çizgiler nasıl numaralanır?

Çizgiler nasıl numaralanır?

Grid'i tanımladığınızda izleri tanımlarsınız, çizgiler kendiliğinden oluşur ve 1'den başlayarak numaralanır. Üç sütun ve üç satırlı bir ızgarada her iki yönde dörder çizgi vardır. Numaralama belgenin yazma yönünü izler: soldan sağa bir dilde 1 numaralı sütun çizgisi solda, sağdan sola bir dilde sağdadır. Satır çizgileri de blok yönünün başından, yatay yazımda en üstten başlar.

Çizgiler sondan geriye doğru da sayılabilir. Açık grid'in son çizgisi -1, ondan önceki -2'dir ve bu böyle devam eder. MDN önemli bir ayrıntının altını çizer: negatif numaralar yalnızca açık grid için geçerlidir. Yani -1, grid-template-columns ve grid-template-rows ile tanımlanan ızgaranın son çizgisidir; içerik yüzünden eklenen örtük satır ya da sütunları hesaba katmaz.

css
.izgara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}
.ust-serit {
  grid-column: 1 / -1;   /* ilk çizgiden açık grid'in son çizgisine */
}
/* sonuç: .ust-serit üç sütunun tamamını kaplar; sütun sayısı
   değişse bile tüm genişliğe yayılmaya devam eder */

grid-column-start, grid-column-end ve kısaltmalar

Bir öğenin yerini dört uzun özellikle tanımlayabilirsiniz: grid-column-start, grid-column-end, grid-row-start ve grid-row-end. Yerleştirirken izi değil çizgiyi hedeflersiniz. Aşağıdaki örnekte ilk öğe 1 numaralı sütun çizgisinden başlayıp tek bir sütun kaplar, satırlarda ise 1 numaralı çizgiden 4 numaralı çizgiye, yani üç satır boyunca uzanır.

css
.kutu1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 4;
}
/* aynı yerleşim kısaltmayla: */
.kutu1 {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
}

grid-column ve grid-row kısaltmalarında eğik çizgiden (/) önceki değer başlangıç, sonraki değer bitiş çizgisidir. Öğe yalnızca bir iz kaplıyorsa bitiş değerini yazmanıza gerek yoktur; grid varsayılan olarak bir iz kaplar. Bu yüzden grid-column: 3, öğeyi 3 numaralı çizgiden başlayan tek bir sütuna koyar. Yerleştirmediğiniz öğeler ise boş hücrelere otomatik yerleşim kurallarıyla dağılır; bir öğe beklenmedik bir yerde görünüyorsa önce ona bir konum verip vermediğinizi kontrol edin.

grid-area ile dört değer

grid-area dört çizgiyi tek bildirimde yazar. Değerlerin sırası şöyledir: grid-row-start, grid-column-start, grid-row-end, grid-column-end. Bu sıra, margin ve padding kısaltmalarındaki saat yönü sırasından farklı olduğu için başta tuhaf gelir. MDN bunun nedenini akışa göreli yönlerle açıklar: önce iki başlangıç kenarı (blok başlangıcı ve satır içi başlangıç), sonra iki bitiş kenarı (blok sonu ve satır içi sonu) yazılır.

css
.kutu1 { grid-area: 1 / 1 / 4 / 2; }
/* satır 1'den, sütun 1'den başlar; satır 4'te, sütun 2'de biter */
.kutu4 { grid-area: 3 / 2 / 4 / 4; }
/* satır 3 ile 4 arası, sütun 2 ile 4 arası: tek satır, iki sütun */

span anahtar sözcüğü

Bitiş çizgisini numarayla vermek yerine kaç iz kaplanacağını span ile söyleyebilirsiniz. grid-row: 1 / span 3, 1 numaralı çizgiden başlayıp üç iz kaplar ve 4 numaralı çizgide biter. span başlangıç tarafında da kullanılabilir; bu durumda öğe bitiş çizgisinden geriye doğru sayılır.

css
/* ikisi de satır 1 ile 4 arasını kaplar */
.a {
  grid-row-start: 1;
  grid-row-end: span 3;    /* 1'den başla, 3 iz ilerle */
}
.b {
  grid-row-start: span 3;  /* bitişten geriye 3 iz */
  grid-row-end: 4;
}

grid-column-start sayfasına göre span ile verilen sayı yazılmazsa 1 kabul edilir; negatif sayılar ve 0 geçersizdir. Çizgi numarası olarak da 0 geçersizdir, çünkü numaralama 1'den ya da sondan -1'den başlar. Değer olarak auto ise öğenin yerleşime hiçbir katkı yapmadığı, yani otomatik yerleşime bırakıldığı anlamına gelir.

Çizgilere ad vermek

Çizgilere ad vermek: -start ve -end ekleri ile örtük alanlar, repeat() ile aynı adlı çizgiler

Çizgi numaraları yerine anlamlı adlar kullanmak, özellikle duyarlı tasarımda düzeni yönetmeyi kolaylaştırır. Adlar iz listesini tanımlarken köşeli parantez içinde yazılır ve izlerin arasına, çizginin bulunduğu yere konur. Tüm çizgileri adlandırmanız gerekmez; yalnızca önemli olanları adlandırabilirsiniz.

css
.sayfa {
  display: grid;
  grid-template-columns: [tam-start] 1fr [icerik-start] 3fr [icerik-end] 1fr [tam-end];
}
.makale {
  grid-column: icerik-start / icerik-end;   /* ortadaki 3fr sütun */
}
.bant {
  grid-column: tam-start / tam-end;         /* bütün genişlik */
}

Adlar yazar tarafından seçilen <custom-ident> değerleridir ve tırnak içine alınmaz. span ve auto ayrılmış sözcüklerdir, çizgi adı olarak kullanılamaz. Bir çizgiye birden fazla ad verebilirsiniz: [yan-end icerik-start] yazarsanız aynı çizgiye iki addan biriyle ulaşırsınız. Bu, bir bölgenin bittiği yerde diğerinin başladığı düzenlerde işe yarar.

-start ve -end ekleri ile örtük alanlar

Bir bölgenin çevresindeki çizgilere aynı ana adı -start ve -end ekleriyle verirseniz grid o ana adla bir alan oluşturur. Yukarıdaki örnekte sütun çizgileri icerik-start ve icerik-end olarak adlandırıldı; satırlarda da aynı adlar olsaydı grid-area: icerik yazmak öğeyi doğrudan o bölgeye yerleştirirdi. Bunun tersi de geçerlidir: grid-template-areas ile tanımlanan her alan, alan-start ve alan-end adlı örtük çizgiler üretir. grid-column-start sayfası bunu şöyle açıklar: grid-column-start: foo yazdığınızda tarayıcı önce foo-start adlı bir çizgi arar ve adlandırılmış alanlar bu çizgileri otomatik oluşturduğu için alanın başlangıç kenarını bulur.

repeat() ile aynı adlı çizgiler

repeat() içinde çizgi adı kullanırsanız birden fazla çizgi aynı adı taşır. Bu durumda ada bir sayı ekleyerek kaçıncı çizgiyi kastettiğinizi belirtirsiniz. Yalnızca ad yazarsanız o addaki ilk çizgi kullanılır.

css
.izgara {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(12, [sutun] 1fr);
}
.baslik  { grid-column: sutun / span 12; }      /* tam genişlik */
.yan     { grid-column: sutun / span 3; }       /* 1. çizgiden 3 sütun */
.icerik  { grid-column: sutun 4 / span 6; }     /* 4. sutun çizgisinden 6 sütun */
.yan2    { grid-column: sutun 10 / span 3; }    /* 10. sutun çizgisinden 3 sütun */

MDN bu deseni on iki sütunlu bir "çatı" olarak gösterir ve bir ayrıntıyı vurgular: hiçbir yüzde hesabı yapmanız gerekmez, çünkü grid 10 piksellik olukları 1fr sütunlara alan dağıtmadan önce düşer. repeat(4, [sutun-start] 1fr [sutun-end]) gibi bir tanımda yan yana gelen iki ad aynı çizgide birleşir; sonuç her ara çizgide [sutun-end sutun-start] yazmışsınız gibi olur.

grid-template-areas: düzeni metinle çizmek

Bu yöntemde önce her öğeye grid-area ile bir ad verirsiniz. Ad tek başına düzen oluşturmaz; yalnızca kullanılabilecek bir alan adı tanımlar. Düzeni ise kapsayıcıda grid-template-areas ile kurarsınız. Her tırnaklı dize bir satırı, dizedeki her sözcük bir hücreyi temsil eder. Aynı adın yan yana ya da alt alta tekrarlanması, o alanın birden fazla hücreye yayılması demektir. MDN bu yönteme bu yüzden "ASCII çizimi" yöntemi de der.

html
<div class="sayfa">
  <header class="ust">Başlık</header>
  <aside class="yan">Yan panel</aside>
  <main class="icerik">İçerik</main>
  <footer class="alt">Alt bilgi</footer>
</div>
css
.ust    { grid-area: ust; }
.yan    { grid-area: yan; }
.icerik { grid-area: icerik; }
.alt    { grid-area: alt; }

.sayfa {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "ust ust    ust    ust"
    "yan icerik icerik icerik"
    ".   alt    alt    alt";
}
/* sonuç: başlık dört sütunu kaplar; yan panel 1 sütun, içerik 3 sütun;
   son satırda yan panelin altı boş kalır, alt bilgi içeriğin altına gelir */

Örnekteki nokta (.) bir boş hücre işaretidir. MDN'e göre bir ya da daha fazla ardışık noktadan oluşan dizi tek bir boş hücre sayılır; bu yüzden hizayı korumak için ... yazmak da tek hücre anlamına gelir. Birden fazla boş hücre için noktaları boşlukla ayırmanız gerekir. Sözcükler arasına fazladan boşluk koyarak sütunları alt alta hizalamak da serbesttir ve okunabilirliği artırır.

Geçerli bir alan şablonunun kuralları

  • Her satır aynı sayıda hücre içermeli: Eksik hücre bırakılamaz; boş kalacak yerlere nokta konur.
  • Alanlar dikdörtgen olmalı: L ya da T biçimli bir alan oluşturmak mümkün değildir.
  • Kural bozulursa bildirimin tamamı geçersizdir: MDN bu durumda özelliğin yok sayıldığını belirtir; tarayıcı hata göstermez, düzen yalnızca kurulmaz.

Bu sessiz hata davranışı CSS'in genel hata işleme yaklaşımının bir parçasıdır. Bir şablon "çalışmıyorsa" ilk iş satırlardaki hücre sayılarını saymak ve her adın dikdörtgen oluşturup oluşturmadığına bakmaktır. Geçersiz bildirimlerin neden yok sayıldığı CSS çalışmıyor: sık hatalar yazısında ele alınıyor.

Medya sorgularıyla düzeni yeniden çizmek

Alan şablonunun en güçlü yanı, düzenin tek bir yerde durmasıdır. Dar ekranlar için tek sütunlu bir şablon tanımlayıp geniş ekranlarda yalnızca grid-template-columns ve grid-template-areas değerlerini değiştirirsiniz. MDN, alan adlarını (grid-area atamalarını) medya sorgularının dışında tanımlamanızı önerir; böylece içerik alanı hangi düzende olursa olsun hep aynı adı taşır.

css
.sayfa {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "ust"
    "icerik"
    "yan"
    "alt";
}
@media (width >= 40em) {
  .sayfa {
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
      "ust ust"
      "yan icerik"
      "yan alt";
  }
}

@media sözdizimi ve aralık yazımı media query sözdizimi yazısında anlatılıyor. Aynı yöntem küçük bileşenlerde de çalışır: MDN'in medya nesnesi örneğinde görsel ve metin "img content" şablonuyla yerleştirilir; ters çevrilmiş sürüm için yalnızca grid-template-columns sırası ve şablon "content img" olarak değiştirilir.

grid-template ve grid kısaltmaları

grid-template kısaltması grid-template-rows, grid-template-columns ve grid-template-areas değerlerini tek bildirimde yazar; açık grid'i tanımladığı için MDN ona açık grid kısaltması der. grid kısaltması bunlara ek olarak örtük grid'i yöneten grid-auto-rows, grid-auto-columns ve grid-auto-flow özelliklerini de ayarlar.

css
.sayfa {
  display: grid;
  grid-template:
    "ust ust"    auto
    "yan icerik" 1fr
    "yan alt"    auto
    / 1fr 3fr;
}
/* her satır dizesinin sonunda o satırın yüksekliği,
   eğik çizgiden sonra sütun izleri */

Üst üste binme ve görsel sıra

Öğeleri açıkça yerleştirdiğinizde aynı hücreleri paylaşmaları mümkündür. Bu, bilerek kullanıldığında ilginç etkiler yaratır; ama yanlış bir başlangıç ya da bitiş çizgisi yazdığınızda istemeden de oluşabilir. Çakışan öğelerden kaynakta sonra gelen üstte görünür ve sıra z-index ile değiştirilebilir. MDN'in adlandırılmış çizgi örneğinde bir kaplama öğesi grid-column: main-start / main-end ve grid-row: hd-start / ft-end ile alanların ürettiği örtük çizgilere yerleştirilir ve z-index ile öne alınır.

Çizgi ya da alan yerleşimi öğeleri kaynak sırasından bağımsız olarak istediğiniz yere taşıyabilir. MDN'in erişilebilirlik rehberi bunun yalnızca görsel bir yeniden sıralama olduğunu hatırlatır: ekran okuyucular ve klavyeyle Tab gezinmesi kaynak sırasını izler. Grid belirtimi de bu özelliklerin mantıksal sıralama için kullanılmaması gerektiğini söyler. Bir öğeyi ızgarada sürekli başka bir yere taşıyorsanız, HTML'deki yerini de değiştirmeyi düşünün ve sayfayı klavyeyle gezerek test edin.

Sık yapılan hatalar

Sık yapılan hatalar: Satırlarda farklı sayıda hücre yazmak, Alan adını tırnakla yazmak, -1 ile örtük satırlara ulaşmaya çalışmak, grid-area sırasını margin sırası sanmak
  • Satırlarda farklı sayıda hücre yazmak: grid-template-areas bütünüyle geçersiz olur ve hiç uygulanmaz.
  • Alan adını tırnakla yazmak: grid-area değeri bir tanımlayıcıdır; grid-area: "ust" değil grid-area: ust yazılır. Tırnaklar yalnızca grid-template-areas dizelerinde kullanılır.
  • -1 ile örtük satırlara ulaşmaya çalışmak: Negatif numaralar yalnızca açık grid içindir.
  • grid-area sırasını margin sırası sanmak: Sıra satır başlangıcı, sütun başlangıcı, satır sonu, sütun sonudur.
  • Çizgiyi iz sanmak: grid-column: 1 / 3 iki sütun kaplar, üç değil.
  • Kısaltmayla mevcut ayarları silmek: grid ve grid-template yazılmayan değerleri sıfırlar.

Sık Sorulan Sorular

grid-template-areas mı çizgi numaraları mı kullanmalıyım?

MDN'in önerisine göre basit düzenlerde adlandırılmış alanlar iyi çalışır, çünkü düzenin görsel bir resmini doğrudan CSS'te görürsünüz ve öğeleri taşımak kolaydır. Katı çok sütunlu düzenlerde ise adlandırılmış çizgiler ve span daha esnektir. İki yöntemi aynı ızgarada birlikte kullanabilirsiniz.

Bir hücreyi nasıl boş bırakırım?

grid-template-areas içinde o hücreye bir nokta (.) yazın. Çizgi yerleşiminde ise o hücreye hiçbir öğe yerleştirmemeniz yeterlidir; ancak otomatik yerleşen öğeler boş hücreleri doldurabilir.

Bir öğeyi tüm genişliğe nasıl yayarım?

grid-column: 1 / -1 yazın. -1 açık grid'in son çizgisi olduğu için sütun sayısı değişse de öğe baştan sona uzanır.

Alanlar L şeklinde olabilir mi?

Hayır. Grid alanları dikdörtgen olmak zorundadır; MDN dikdörtgen olmayan bir şablonun geçersiz olduğunu ve belirtimin bu yeteneği ancak gelecekteki bir düzeyde sağlayabileceğini not ettiğini belirtir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: CSS öğrenme rehberi · CSS grid rehberi · auto-fill, auto-fit ve minmax() · Media query sözdizimi · z-index ve stacking context