CSS Grid’de grid-template-columns Nasıl Kullanılır?

grid-template-columns, CSS Grid kapsayıcısındaki sütun sayısını ve genişliklerini belirler. Üç eşit sütun için repeat(3, 1fr), sabit ve esnek sütun için 240px 1fr yazın. Temel uygulama yaklaşık 5 dakika sürer; zorluk başlangıç düzeyindedir. Bir HTML kapsayıcısı ve CSS dosyası yeterlidir.

grid-template-columns Ne İşe Yarar?

Önce kapsayıcıya display: grid verin. Ardından grid-template-columns özelliğine, boşlukla ayrılmış sütun ölçülerini yazın. Her değer bir sütun izi oluşturur; değerlerin sırası soldan sağa sütunların sırasını belirler.

Grid kapsayıcısının doğrudan çocukları Grid öğesi olur. Örneğin 240px 1fr değeri, ilk sütunu 240 piksel genişliğinde tutar. İkinci sütun, aralıklar ve sabit ölçüler çıkarıldıktan sonra kalan alanı kaplar. Grid düzeninin temelini öğrenmek için CSS’nin temel yapısı yazısına da bakabilirsiniz.

Sütun Genişliğini Hangi Değerlerle Ayarlarsınız?

Sabit genişlik, esnek pay ve yüzde ölçülerini aynı tanımda kullanabilirsiniz. Seçiminizi içerik türüne göre yapın: sabit kenar çubuğu için piksel, kalan alan için fr, kapsayıcı oranı için yüzde kullanın. Aşağıdaki değerler aynı işlevi görmez; her biri sütun ölçüsünü farklı biçimde hesaplar.

Yüzde değerleri kapsayıcı genişliğine göre hesaplanır. Yüzdelerin toplamına gap eklemek, toplam genişliğin kapsayıcıyı aşmasına yol açabilir. Örneğin iki yüzde sütununa 20px boşluk ekleyecekseniz sütun oranlarını boşluğu hesaba katarak seçin.

repeat() ve minmax() ile Esnek Düzen Kurun

Aynı sütun tanımını tekrar yazmak yerine repeat() kullanın. repeat(3, 1fr), üç eşit sütun oluşturur. Sütunların içerik tarafından gereğinden fazla genişlemesini önlemek için repeat(3, minmax(0, 1fr)) yazabilirsiniz. minmax() içindeki ilk değer alt sınırı, ikinci değer üst sınırı tanımlar.

Kart düzeninde sütun sayısını kapsayıcı genişliğine göre ayarlamak için repeat(auto-fit, minmax(240px, 1fr)) kullanın. Bu tanım, en az 240 piksel genişliğinde sığan sütunları oluşturur ve kalan alanı sütunlar arasında paylaştırır. Alan daralınca kartlar yeni satırlara geçer.

auto-fill boş sütun izlerini korur; auto-fit kullanılmayan izleri daraltır. Bu nedenle son satırda az sayıda kart varsa auto-fit mevcut kartların daha fazla alan kaplamasını sağlar. Satır ve sütun aralıklarını gap: 20px ile belirleyin.

Uygulama: Kart Sütunlarını Adım Adım Kurun

Örnekte üç ayrı kart içeren bir kapsayıcı kullanacağız. HTML dosyanızda kartları aynı kapsayıcı içine yerleştirin. HTML dosyası hazırlamanız gerekiyorsa ilk HTML dosyasını oluşturma rehberini kullanabilirsiniz.

Başlamadan önce gerekenler:

• Bir HTML kapsayıcısı ve içinde en az 3 kart.
• Kapsayıcıya uygulanacak bir CSS sınıfı.
• Kartlar arasında boşluk istiyorsanız belirleyeceğiniz bir gap ölçüsü.

1. Kartları taşıyan kapsayıcıya display: grid verin.
2. Sütunları repeat(auto-fit, minmax(240px, 1fr)) ile tanımlayın.
3. Kartların arasına gap: 20px ekleyin.
4. Sayfa genişliğini daraltıp kartların yeni satıra geçtiğini kontrol edin.

Örnek CSS tanımı: .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }. Kartların HTML sırası, Grid’in otomatik yerleştirme sırasını belirler. Düzeni Flexbox ile karşılaştırmak için Flexbox’ın temel mantığını okuyabilirsiniz.

Sık Yapılan Hatalar ve Çözümleri

Grid kapsayıcısına display: grid vermeyi unutursanız grid-template-columns düzen oluşturmaz. Önce özelliğin doğru elemana yazıldığını ve kartların doğrudan çocuk olduğunu kontrol edin. Bir kartın içinde başka bir Grid düzeni varsa, iç kapsayıcıya ayrıca display: grid vermeniz gerekir.

1fr sütununun içeriğe göre genişleyip yatay taşma oluşturması yaygın bir sorundur. Sütun tanımında minmax(0, 1fr) kullanın veya taşan Grid öğesine min-width: 0 ekleyin. Uzun bir kelime ya da geniş görsel kendi kutusunu aşıyorsa, öğenin içeriğini de ayrıca düzenleyin.

Yüzde sütunları ve gap birlikte kullanıldığında toplam genişliği kontrol edin. Örneğin 50% 50% tanımına eklenen boşluk, kapsayıcıdan taşmaya neden olur. Eşit esnek sütunlar istiyorsanız 1fr 1fr kullanın; gap değerini ayrıca tanımlayın.

Sorun Çıkarsa Nasıl Düzeltirsiniz?

Sütun sayısı beklediğiniz gibi görünmüyorsa önce kapsayıcının kullanılabilir genişliğini inceleyin. auto-fit düzeninde her sütunun minimum genişliği 240 piksel olduğundan, dar alanda daha az sütun sığar. Daha küçük kartlar istiyorsanız minmax() içindeki 240px değerini hedeflediğiniz alt genişliğe indirin.

Sütunlar eşit görünmüyorsa her sütunun tanımını kontrol edin. 1fr 2fr değerleri eşit genişlik vermez; kalan alanı üç paya böler. Sabit ölçülü sütunlar ve gap alanı da fr sütunlarına ayrılan boşluğu azaltır.

Öğeyi birden fazla sütuna yaymak istiyorsanız genişliği grid-template-columns üzerinde değiştirmeyin. Bu özellik kapsayıcının sütun izlerini tanımlar. Öğenin kendi kuralına grid-column: span 2 ekleyin. Böylece öğe iki sütun boyunca uzanır; kapsayıcının sütun sayısı aynı kalır.

Bir Öğeyi Birden Fazla Sütuna Yayın

Sütun genişliğini belirlemekle bir öğenin sütunlardaki konumunu belirlemek ayrı işlemlerdir. grid-template-columns, Grid kapsayıcısının sütunlarını tanımlar. grid-column ise belirli bir Grid öğesinin hangi sütunları kullanacağını ayarlar.

Örneğin kapsayıcıda üç sütun varsa, bir başlığı iki sütuna yaymak için başlık öğesine grid-column: span 2 yazın. Aynı kuralı kartlardan yalnızca birine uygulayabilirsiniz. Sütunların genel yapısını değiştirmeden tek bir öğenin daha geniş alan kaplamasını bu şekilde sağlarsınız.

span değeri, öğenin kaç sütun izleyeceğini belirtir. İki sütunluk bir öğeden sonra Grid, sıradaki öğeleri otomatik yerleştirmeyi sürdürür. Beklenmeyen boşluk görürseniz öğelerin HTML sırasını ve grid-column kurallarını birlikte kontrol edin.