Skip to main content

CSS Grid Özelliklerini Kullanarak İçerik ve Öğeleri Hizalama

CSS Grid, iki boyutlu web yerleşimleri oluşturmak için güçlü bir araçtır.
Grid’in hizalama yeteneklerini anlamak, elementlerin konumunu ve aralarındaki boşlukları kontrol etmeni sağlar. Böylece herhangi bir cihazda çalışan karmaşık ve duyarlı (responsive) tasarımları daha kolay kurabilirsin.

Sadece tek satırlık bir kodla bile elementleri ortalayabilir veya ince ayarlarla asimetrik düzenler oluşturabilirsin.

Bu yazıda, CSS Grid kullanarak içerikleri nasıl hizalayabileceğini inceleyeceğiz.
Şunları öğreneceksin:

  • Grid kapsayıcısının hizalanması: justify-content, align-content
  • Grid öğelerinin kendi hücreleri içindeki hizalanması: justify-items, align-items, justify-self, align-self

Her özelliği net açıklamalar ve pratik örneklerle ele alacağız. Ayrıca bu özellikleri nasıl birlikte kullanabileceğini gösterecek, gerçek hayattan kullanım senaryolarına değineceğiz.

Bunlara ek olarak, en iyi uygulamalar (best practices) ve erişilebilirlik (accessibility) noktalarına da dokunarak, hem verimli hem de kullanıcı dostu tasarımlar oluşturabilmen için yol göstereceğiz.

Özet​

  • CSS Grid’de hizalama iki ana kategoriye ayrılır:
    Grid kapsayıcısını hizalayan özellikler ve grid öğelerini hizalayan özellikler.

  • justify-content ve align-content, kapsayıcı içindeki tüm grid için kalan boşluğu dağıtır.

  • justify-items ve align-items, her bir öğenin kendi hücresi içindeki varsayılan hizasını belirler.

  • Tek bir öğenin hizasını değiştirmek için justify-self ve align-self kullanılabilir.

  • Kısayol özellikler olan place-content ve place-items, kodu daha temiz ve verimli hale getirir.

  • Her zaman mantıklı bir HTML kaynak sırası korumalısın. Çünkü sadece CSS ile görsel yeniden sıralama yapmak, ekran okuyucu kullananlar için erişilebilirlik sorunlarına yol açabilir.

Ön Gereklilikler​

Bu yazıyı uygulamalı olarak takip edebilmek için şunlara ihtiyacın olacak:

CSS Grid Layout’a Giriş​

CSS Grid Layout, CSS’in kendi içinde yer alan güçlü bir iki boyutlu düzen sistemidir.
Flexbox’tan farklı olarak (ki Flexbox tek boyutludur ve yalnızca satır ya da sütun hizalaması için tasarlanmıştır), Grid aynı anda hem satırları hem de sütunları yönetebilir.

Bu özelliği sayesinde Grid, yalnızca küçük bileşenlerde (örneğin resim galerileri veya formlar) değil, aynı zamanda tüm sayfa yapılarında da karmaşık web düzenleri oluşturmak için mükemmel bir araçtır.

Grid’in temelinde, sana basitçe bir ızgara yapısı oluşturma ve öğeleri bu yapının içine tam istediğin şekilde yerleştirme imkânı verir.
Bu sistemi gerçekten iyi kavramanın anahtarı ise onun güçlü hizalama özelliklerini anlamaktır.

İçerik ve öğeleri doğru şekilde hizalamak:

  • Responsive (duyarlı) tasarımlar yapmak,
  • Düzenli ve organize bir görünüm sağlamak,
  • Farklı ekran boyutlarına sorunsuz uyum sağlayan, görsel olarak çekici arayüzler kurmak için kritik öneme sahiptir.

Hizalama özelliklerine geçmeden önce iki temel kavramı hızlıca tanımlayalım:

  • Grid Container: display: grid; uyguladığın ebeveyn HTML elemanıdır. Bu eleman bir grid haline gelir ve doğrudan çocukları için yeni bir grid biçimlendirme bağlamı (grid formatting context) oluşturur.

  • Grid Item: Grid Container’ın doğrudan çocuk elemanlarıdır. Grid içinde düzenleyip hizalayabileceğin öğeler bunlardır.

Öncelikle, tüm örneklerde kullanacağımız ortak bir HTML yapısı oluşturalım. Bu yapı, altı adet çocuk öğeden oluşan bir konteyner olacak ve biz bunu grid’e çevireceğiz:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

Bu HTML yapısını grid’e dönüştürmek için kullanacağımız CSS şu şekilde olabilir:

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: auto;

  box-sizing: border-box;
  width: 400px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;

  background: #dceff7;
  border: 2px solid rgba(114, 186, 94, 0.35);
}

.grid-item {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  background: #FBF2C0;
  border: 2px solid rgba(236, 198, 48, 0.5);
}

Bu kod, her biri 100px genişliğinde 3 sütundan oluşan bir grid düzeni oluşturur.
Her bir grid öğesi ise 50px genişlik ve 50px yükseklik boyutlarına sahip olur:

Grid Görüntüsü

Grid Konteynerini Hizalama ve Justify Etme Nedir?​

Bu özellikler, boşlukları grid konteynerinin içinde dağıtır.
Yani kolonlar ve satırlardan oluşan grid’in toplam boyutu, konteynerin boyutundan küçük olduğunda etkilerini görebilirsin.

Özetle: Eğer grid’in tüm alanı kaplamıyorsa, bu özellikler kalan boşluğu nasıl kullanacağını belirler.

justify-content​

justify-content özelliği, grid’i satır (yatay / inline) ekseni boyunca hizalar.

Kullanabileceğin değerler:

  • start: Grid’i başlangıç kenarına yaslar. (Varsayılan)
  • end: Grid’i bitiş kenarına yaslar.
  • center: Grid kolonlarını konteynerin ortasına hizalar.
  • space-between: İlk öğe başlangıca, son öğe sona yaslanır; ortadakiler eşit boşlukla dağıtılır.
  • space-around: Her sütunun her iki yanında eşit boşluk bırakır.
  • space-evenly: Tüm sütunlar arasında ve kenarlarla aralarında tamamen eşit boşluk bırakır.

Örnek (center kullanımı):

.grid-container {
  justify-content: center; /* Yatayda ortalama */
}

Grid Görüntüsü

Grid öğeleri, yatayda kolonların ortasına hizalanır.

align-content​

align-content özelliği, grid’i sütun (dikey / block) ekseni boyunca hizalar.

Kullanabileceğin değerler:

  • start: Grid’i üst kenara yaslar. (Varsayılan)
  • end: Grid’i alt kenara yaslar.
  • center: Grid satırlarını dikeyde ortalar.
  • space-between: İlk satır en üstte, son satır en altta olacak şekilde aradakiler eşit boşlukla dağıtılır.
  • space-around: Her satırın üstünde ve altında eşit boşluk bırakır.
  • space-evenly: Satırlar arasında ve kenarlarla satırlar arasında eşit boşluk bırakır.

Örnek:

.grid-container {
  align-content: space-evenly; 
}

Grid Görüntüsü

place-content​

place-content, hem align-content hem de justify-content özelliklerini tek satırda ayarlamak için kullanılan bir kısayoldur.

  • İlk değer → align-content (dikey hizalama)
  • İkinci değer → justify-content (yatay hizalama)

Örnek:

.grid-container {
  place-content: end space-between; 
}

Grid Görüntüsü

Eğer yalnızca tek bir değer verilirse, bu değer hem align-content hem de justify-content için uygulanır.

.grid-container {
  place-content: center; 
}

Grid Görüntüsü

Grid Öğelerini Hizalama ve Justify Etme Nedir?​

Bu özellikler, grid konteyneri üzerinde tanımlanır ancak her bir öğenin kendi hücresinin içinde nasıl konumlanacağını belirler.

justify-items​

justify-items, öğeleri hücreleri içinde satır (yatay / inline) ekseni boyunca hizalar.

Kullanabileceğin değerler:

  • stretch: Öğeyi hücrenin tüm genişliğini kaplayacak şekilde uzatır. (Varsayılan)
  • start: Öğeyi hücrenin sol tarafına hizalar.
  • end: Öğeyi hücrenin sağ tarafına hizalar.
  • center: Öğeyi yatayda hücrenin ortasına hizalar.

Örnek:

.grid-container {
  justify-items: center; 
}

Grid Görüntüsü

align-items​

align-items, öğeleri hücreleri içinde sütun (dikey / block) ekseni boyunca hizalar.

Kullanabileceğin değerler:

  • stretch: Öğeyi hücrenin tüm yüksekliğini kaplayacak şekilde uzatır. (Varsayılan)
  • start: Öğeyi hücrenin üstüne hizalar.
  • end: Öğeyi hücrenin altına hizalar.
  • center: Öğeyi dikeyde hücrenin ortasına hizalar.

Örnek:

.grid-container {
  align-items: end; 
}

Grid Görüntüsü

place-items (Kısayol)​

place-items, hem align-items hem de justify-items özelliklerini tek satırda tanımlamana olanak sağlar.

  • İlk değer → align-items (dikey hizalama)
  • İkinci değer → justify-items (yatay hizalama)

Bu özellik, öğeleri hücrelerinin içinde ortalamak için en kolay yöntemlerden biridir.

Örnek:

.grid-container {
  place-items: center; 
}

Grid Görüntüsü

Bireysel Öğeler İçin Hizalama​

Bazen yalnızca tek bir grid öğesinin diğerlerinden farklı hizalanmasını isteyebilirsin.
Bunun için hizalama özelliklerini doğrudan o öğeye uygularsın.

justify-self​

justify-self, belirli bir öğe için kapsayıcının justify-items ayarını geçersiz kılar.
Hücre içinde yatay eksende hizalama yapar.

Alabileceği değerler: start, end, center, stretch

Örnek:

.grid-container {
  justify-items: start; 
}

.grid-item:nth-child(3) {
  justify-self: end; 
}

Grid Görüntüsü

align-self​

align-self, belirli bir öğe için kapsayıcının align-items ayarını geçersiz kılar.
Hücre içinde dikey eksende hizalama yapar.

Alabileceği değerler: start, end, center, stretch

Örnek:

.grid-container {
  align-items: center; 
}

.grid-item:nth-child(3) {
  align-self: start; 
}

Grid Görüntüsü

place-self​

place-self, bir öğe üzerinde hem align-self hem de justify-self özelliklerini aynı anda tanımlamak için kullanılan kısayoldur.

  • İlk değer → align-self (dikey hizalama)
  • İkinci değer → justify-self (yatay hizalama)

Örnek:

.grid-item:nth-child(3) {
  place-self: end end; 
}

Grid Görüntüsü

Birden Fazla Grid Hizalama Özelliğini Birleştirmek​

CSS Grid’de hizalama özellikleri birbirini dışlayan yapılar değildir.
Aksine, farklı seviyelerde birlikte çalışarak tasarım üzerinde çok daha ince ayar yapmana olanak tanır.

  • Konteyner seviyesinde: justify-content ve align-content → tüm grid’in nasıl hizalanacağını belirler.
  • Öğe seviyesinde (varsayılan): justify-items ve align-items → tüm öğelerin hücre içindeki varsayılan hizasını belirler.
  • Bireysel öğe seviyesinde: justify-self, align-self veya place-self → tek bir öğeyi diğerlerinden bağımsız hizalamanı sağlar.

Bu özellikleri bir arada kullanarak, hem genel düzeni hem de tek tek öğeleri esnek, duyarlı (responsive) ve görsel olarak dengeli bir şekilde yerleştirebilirsin.

Hatırlanması gereken en önemli kavram sorumlulukların ayrımıdır:

  • *-content özellikleri (justify-content, align-content) → Tüm grid’in, kapsayıcı içindeki boşlukta nasıl hizalanacağını belirler.
  • *-items özellikleri (justify-items, align-items) → Her bir öğenin, kendi hücresi içinde nasıl hizalanacağını belirler.

Aşağıdaki örnekte bu özellikler birlikte kullanılmıştır:

.grid-container {
  justify-content: space-evenly;
  justify-items: center;
  align-content: space-evenly;
  align-items: center;
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: auto;

  box-sizing: border-box;
  width: 400px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;

  background: #dceff7;
  border: 2px rgba(114, 186, 94, 0.35);
}

.grid-item {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  background: #FBF2C0;
  border: 2px rgba(236, 198, 48, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

Bu kod, place-content özelliğini kullanarak tüm grid’i kapsayıcı içinde ortalar (yani justify-content ve align-content kısayolu),
aynı zamanda place-items ile her öğeyi kendi hücresinde ortalar (justify-items ve align-items kısayolu):

Grid Görüntüsü

Sonuç​

Artık CSS Grid’in tüm hizalama özelliklerini keşfettiniz:

  • Tüm grid’i hizalamak için place-content,
  • Öğeleri hücrelerinde düzenlemek için place-items,
  • Bireysel öğeleri özelleştirmek için place-self kullanmayı gördün.

Kapsayıcı ile öğelerin hizalanması arasındaki temel farkı anladığında, çok daha rahat şekilde karmaşık, responsive ve piksel hassasiyetinde düzenler kurabilirsin. Üstelik bunu daha temiz ve okunabilir bir kodla yapabilirsin.

Bundan sonraki adım: deney yapmak.

  • Öğrendiklerini pratik örneklerle uygula,
  • Değerleri değiştirerek farklı sonuçları gör,
  • Ve bu güçlü araçları kendi projelerinde kullanarak gerçekten ustalaşmaya başla.