Merhaba arkadaşlar, bugün CSS Grid ile uğraşırken kafamı bir hayli karıştıran bir konuyu, explicit ve implicit grid ayrımını netleştirmek için yaptığım küçük bir görselleştirme şablonundan bahsedeceğim. Özellikle grid dışına taşan (veya taşmasını beklediğim) öğelerin davranışlarını kontrol etmek istediğimde, bu iki kavramı anlamak işleri inanılmaz kolaylaştırdı. Siz de benim gibi "Bu eleman neden buraya atıldı?" diye düşünüyorsanız, bu yazı tam size göre.
Kafa Karışıklığının Kaynağı
İşin özü şu: Explicit grid, bizim grid-template-rows ve grid-template-columns ile tanımladığımız, kesin çizgileri belli olan ızgaramız. Implicit grid ise, bu tanımlı alanların dışına çıkmak zorunda kalan grid öğeleri için tarayıcının otomatik olarak oluşturduğu ek satır ve sütunlar. Bu implicit alanların boyutlarını kontrol etmezsek, öğelerimiz istemediğimiz şekilde, varsayılan auto boyutlarda sıralanıyor ve tasarımımız bozulabiliyor.
Görsel Şablonumun Yapı Taşları
Anlamayı kolaylaştırmak için iki div'den oluşan basit bir şablon hazırladım. Birinci div, explicit grid'imizi temsil ediyor ve sabit boyutlara sahip. İkinci div ise, içine yerleştirdiğim fazla sayıdaki öğe ile implicit grid'in nasıl oluştuğunu gösteriyor.
İşte temel HTML yapısı:
CSS ile Kontrolü Ele Alıyoruz
Şimdi sihirli kısma, CSS'e geçelim. İki grid konteynerini de yan yana görmek için ana container'ı flex yapıyorum. Asıl önemli kısım, .implicit-grid sınıfında yaptığım tanımlamalar.
Buradaki altın anahtar, grid-auto-rows: 60px; satırı. Explicit olarak satır tanımlamadığım (grid-template-rows yazmadığım) için, 4. öğeden sonraki tüm öğeler implicit grid'e ait yeni satırlara yerleşiyor. Ve ben bu satırların yüksekliğini bu property ile 60px olarak sabitleyerek kontrol altına alıyorum. Aynı mantık grid-auto-columns ve grid-auto-flow property'leri ile sütunlar ve yerleşim yönü için de geçerli.
Sonuç ve Yorum Sizde
Bu basit şablonu oluşturduktan sonra, grid-auto-rows değerini değiştirip tarayıcıda anında sonucu görmek, implicit grid kavramını beynime kazıdı. Artık dinamik içerikli grid'ler tasarlarken, explicit alanımın bittiği yerde implicit alanın nasıl davranacağını önceden planlayabiliyorum.
Siz CSS Grid'de implicit öğelerin yerleşimini kontrol etmek için hangi yöntemleri kullanıyorsunuz? grid-auto-flow property'sini dense değeri ile kullanarak boşlukları doldurmayı denediniz mi? Bu konudaki deneyimlerinizi ve farklı kullanım senaryolarınızı yorumlarda paylaşırsanız çok sevinirim!
Kafa Karışıklığının Kaynağıİşin özü şu: Explicit grid, bizim grid-template-rows ve grid-template-columns ile tanımladığımız, kesin çizgileri belli olan ızgaramız. Implicit grid ise, bu tanımlı alanların dışına çıkmak zorunda kalan grid öğeleri için tarayıcının otomatik olarak oluşturduğu ek satır ve sütunlar. Bu implicit alanların boyutlarını kontrol etmezsek, öğelerimiz istemediğimiz şekilde, varsayılan auto boyutlarda sıralanıyor ve tasarımımız bozulabiliyor.
Görsel Şablonumun Yapı TaşlarıAnlamayı kolaylaştırmak için iki div'den oluşan basit bir şablon hazırladım. Birinci div, explicit grid'imizi temsil ediyor ve sabit boyutlara sahip. İkinci div ise, içine yerleştirdiğim fazla sayıdaki öğe ile implicit grid'in nasıl oluştuğunu gösteriyor.
İşte temel HTML yapısı:
HTML:
<div class="container">
<h3>Explicit Grid (Bizim Tanımladığımız)</h3>
<div class="explicit-grid">
<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>
<h3>Implicit Grid (Tarayıcının Oluşturduğu)</h3>
<div class="implicit-grid">
<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 class="grid-item">7</div>
<div class="grid-item">8</div>
</div>
</div>Şimdi sihirli kısma, CSS'e geçelim. İki grid konteynerini de yan yana görmek için ana container'ı flex yapıyorum. Asıl önemli kısım, .implicit-grid sınıfında yaptığım tanımlamalar.
CSS:
.container {
display: flex;
gap: 40px;
font-family: sans-serif;
}
/ Explicit Grid: Net olarak 2x2'lik bir ızgara tanımlıyorum /
.explicit-grid {
display: grid;
grid-template-columns: 120px 120px;
grid-template-rows: 80px 80px;
gap: 10px;
padding: 15px;
background-color: #f0f8ff;
border: 2px dashed #3498db;
}
/ Implicit Grid: Sadece 2 sütun tanımlayıp, satırları tarayıcıya bırakıyorum /
.implicit-grid {
display: grid;
grid-template-columns: 120px 120px; / Sadece 2 explicit sütun /
/ grid-template-rows TANIMLANMADI! /
grid-auto-rows: 60px; / İşte burada implicit satırların yüksekliğini kontrol ediyorum! /
gap: 10px;
padding: 15px;
background-color: #fff0f5;
border: 2px dashed #e74c3c;
}
/ Ortak grid öğe stilleri /
.grid-item {
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: white;
border-radius: 5px;
}
.explicit-grid .grid-item {
background-color: #3498db;
}
.implicit-grid .grid-item {
background-color: #e74c3c;
}Buradaki altın anahtar, grid-auto-rows: 60px; satırı. Explicit olarak satır tanımlamadığım (grid-template-rows yazmadığım) için, 4. öğeden sonraki tüm öğeler implicit grid'e ait yeni satırlara yerleşiyor. Ve ben bu satırların yüksekliğini bu property ile 60px olarak sabitleyerek kontrol altına alıyorum. Aynı mantık grid-auto-columns ve grid-auto-flow property'leri ile sütunlar ve yerleşim yönü için de geçerli.
Sonuç ve Yorum SizdeBu basit şablonu oluşturduktan sonra, grid-auto-rows değerini değiştirip tarayıcıda anında sonucu görmek, implicit grid kavramını beynime kazıdı. Artık dinamik içerikli grid'ler tasarlarken, explicit alanımın bittiği yerde implicit alanın nasıl davranacağını önceden planlayabiliyorum.
Siz CSS Grid'de implicit öğelerin yerleşimini kontrol etmek için hangi yöntemleri kullanıyorsunuz? grid-auto-flow property'sini dense değeri ile kullanarak boşlukları doldurmayı denediniz mi? Bu konudaki deneyimlerinizi ve farklı kullanım senaryolarınızı yorumlarda paylaşırsanız çok sevinirim!