Şimdi tasarımı bambaşka bir boyuta taşıyoruz. Flexbox ile tek yönlü (satır veya sütun) hizalamayı çözmüştük.4. Dersimizde ise iki boyutlu (hem satırları hem de sütunları aynı anda yönetebileceğimiz) en güçlü yerleşim modülü olan CSS Grid yapısına giriş yapıyoruz. Hedefimiz, modern web tasarımında fırtınalar estiren ve blog sitelerine premium bir hava katan Editorial Bento Grid Layout (Bento Kutusu Düzeni) oluşturmak.
4. Ders: CSS Grid ve Modern Bento Grid Düzeni Tasarımı
Flexbox elemanları tek bir çizgide dizerken, CSS Grid bize hayali bir koordinat düzlemi (ızgara) sunar. Bu sayede kutuların genişliklerini, yüksekliklerini ve hangi kutunun nerede duracağını milimetrik olarak kontrol edebiliriz.
1. Grid Temelleri: grid-template-columns ve gap
Bir alanı Grid düzenine geçirmek için yine kapsayıcıya (anneye) müdahale ederiz:
.grid-kapsayici {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Yan yana 3 eşit sütun oluşturur */
gap: 20px; /* Kutuların arasındaki dikey ve yatay boşluk */
}
Not: 1fr (fractional unit), ekranın kalan boşluğunu esnek paylaştıran harika bir Grid birimidir. repeat(3, 1fr) ifadesi, 1fr 1fr 1fr yazmanın kısa yoludur.
2. Bento Grid Mantığı Nedir?
Bento Grid, adını Japonların bölmeli yemek kutularından alan; büyük, küçük ve asimetrik kutuların bir araya gelerek kusursuz bir bütün oluşturduğu modern bir yerleşim düzenidir.
Bir kutunun Grid üzerinde kaç sütun veya kaç satır kaplayacağını şu sihirli komutlarla belirleriz:
grid-column: span 2;-> Bu kutu yan yana 2 sütunluk yer kaplasın.grid-row: span 2;-> Bu kutu yukarıdan aşağıya 2 satırlık yer kaplasın.
3. Pratik Uygulama: Blogger İçin Editorial Bento Grid
Blogger ana sayfasındaki öne çıkan yayınlar (Featured Posts) alanı veya özel bir galeri için kullanabileceğimiz 4 kutulu, asimetrik ve çok estetik bir Bento Grid yapalım.
CSS Kodlarımız:
/* Bento Grid Ana Kapsayıcı */
.bento-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 sütunlu taban */
grid-auto-rows: 200px; /* Satırların varsayılan yüksekliği */
gap: 15px;
max-width: 1000px;
margin: 20px auto;
}
/* Tüm Bento Kutularının Ortak Özellikleri */
.bento-box {
background-color: #ffffff;
border: 1px solid #e1e8ed;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.02);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.bento-box:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
/* --- KUTULARIN ASİMETRİK DAĞILIMI --- */
/* 1. Kutu: Büyük Öne Çıkan Yazı (2 Sütun, 2 Satır kaplayacak) */
.box-big {
grid-column: span 2;
grid-row: span 2;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
/* 2. Kutu: Dikey Uzun Kutu (1 Sütun, 2 Satır kaplayacak) */
.box-vertical {
grid-column: span 1;
grid-row: span 2;
background-color: #1a1a1a;
color: #fff;
}
/* 3. Kutu: Yatay Geniş Kutu (2 Sütun, 1 Satır kaplayacak) */
.box-wide {
grid-column: span 2;
grid-row: span 1;
}
/* 4. Kutu: Standart Küçük Kutu (Kalan 1 Sütun ve 1 Satırlık boşluğa cuk diye oturur) */
.box-small {
grid-column: span 1;
grid-row: span 1;
}
Ders Sonu Ödevi
Blogger panelinde yeni bir HTML/JavaScript bileşeni aç veya doğrudan şablonun içine şu HTML yapısını yerleştir:
<div class='bento-container'>
<div class='bento-box box-big'><h3>🚀 Öne Çıkan Büyük Haber</h3><p>Bento düzeninin en dikkat çeken alanı.</p></div>
<div class='bento-box box-vertical'><h3>📊 İstatistikler</h3><p>Dikey reklam veya popüler yayınlar için harika alan.</p></div>
<div class='bento-box box-wide'><h3>✍️ Son Dakika Gelişmesi</h3><p>Yatay geniş kutu.</p></div>
<div class='bento-box box-small'><h3>🔔 Duyuru</h3><p>Küçük ipucu kutusu.</p></div>
</div>
Yukarıdaki CSS kodlarını da sitene eklediğinde, kutuların ekran boyutuna göre nasıl kusursuz bir yapboz gibi birleştiğini göreceksin. css,ders,grid
Hiç yorum yok:
Yorum Gönder