Merhaba arkadaşlar, bugün başımı çok ağrıtan bir sorunu ve onun en temiz çözümünü anlatacağım. Bir projede, desktop'ta mükemmel görünen bir sayfa düzeni yapmıştım. CSS Grid ve grid-template-areas özelliği ile her şey yerli yerindeydi. Ta ki mobil görünüme geçene kadar! O zaman anladım ki, sadece boyutları küçültmek yetmiyor, bazen tüm alanların sırasını ve yerleşimini baştan aşağı değiştirmek gerekiyor. İşte bu noktada grid-template-areas benim kurtarıcım oldu.
Temel Layout'umuzu Kuralım
İlk olarak, desktop için bir layout planlayalım. Diyelim ki bir blog sayfamız var: üstte header, yanda sidebar, ortada içerik, altta footer. HTML yapımız basit.
Şimdi sihirli kısım: CSS'imizde grid-template-areas ile bu elemanları görsel bir harita gibi yerleştireceğiz. Bu yöntem, kodunuzu okuyan herkesin layout'u anında anlamasını sağlıyor.
Bu kodda grid-template-areas içindeki string'ler, adeta bir tablo çiziyor. "header" iki kolonu kaplıyor, "content" ve "sidebar" yan yana, "footer" yine iki kolonu kaplıyor. Harika!
Mobilde Her Şeyi Alt Üst Etmek
Peki ya mobilde? Mobilde sidebar'ın content'in altına, hatta belki footer'ın hemen üstüne gelmesini istiyoruz. İlk düşündüğüm, sadece grid-template-columns'u değiştirmekti ama bu yetmedi. Alanların sırası değişmedi. İşte bu hatayı ilk gördüğümde kafayı yemiştim. Çözüm ise inanılmaz basit: Media query içinde grid-template-areas'i TAMAMEN YENİDEN YAZMAK.
Tek yapmamız gereken, mobil ekran boyutunda yeni bir görsel harita tanımlamak. İşte benim kullandığım en temiz çözüm:
Bakın, media query'nin içinde sadece grid-template-areas değerlerini değiştirerek, tüm layout'u baştan aşağı yeniden düzenledik. Artık mobilde tüm elemanlar tek kolonda, sidebar içeriğin altında sıralanıyor. CSS Grid'in gücü işte burada!
İleri Seviye Bir İpucu
Peki ya daha karmaşık bir senaryo? Diyelim ki tablet boyutunda (örneğin 769px ile 1024px arasında) sidebar'ı tamamen kaldırıp, header, content ve footer'dan oluşan daha basit bir layout istiyoruz. Bu durumda HTML'den sidebar'ı silmemize GEREK YOK. Sadece grid-template-areas haritasından onun yerini kaldırıp, CSS ile gizleyebiliriz.
Bu yaklaşım, içeriğin farklı cihazlarda tamamen farklı şekillerde sunulmasına olanak tanıyor. Arama motorları için hala orada olan, ancak kullanıcı deneyimi için gerektiğinde gizlenen veya yeniden konumlandırılan elemanlar.
Sonuç olarak, grid-template-areas sadece bir düzen aracı değil, aynı zamanda güçlü bir "responsive layout switch" mekanizması. Media query'lerle birlikte kullanıldığında, farklı breakpoint'lerde tamamen farklı sayfa şemaları oluşturabiliyorsunuz.
Siz CSS Grid'de responsive tasarım yaparken hangi yöntemleri kullanıyorsunuz? grid-template-areas dışında farklı bir teknikle bu kadar kolay layout değişimi yapabildiniz mi? Ya da bu yöntemle karşılaştığınız ilginç bir sorun oldu mu? Yorumlarda deneyimlerinizi paylaşın!
Temel Layout'umuzu Kuralımİlk olarak, desktop için bir layout planlayalım. Diyelim ki bir blog sayfamız var: üstte header, yanda sidebar, ortada içerik, altta footer. HTML yapımız basit.
HTML:
<div class="container">
<header class="item header">Header</header>
<aside class="item sidebar">Sidebar</aside>
<main class="item content">Ana İçerik</main>
<footer class="item footer">Footer</footer>
</div>Şimdi sihirli kısım: CSS'imizde grid-template-areas ile bu elemanları görsel bir harita gibi yerleştireceğiz. Bu yöntem, kodunuzu okuyan herkesin layout'u anında anlamasını sağlıyor.
CSS:
.container {
display: grid;
gap: 20px;
grid-template-columns: 1fr 250px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"content sidebar"
"footer footer";
min-height: 100vh;
}
.header { grid-area: header; background: #2C3E50; color: white; }
.sidebar { grid-area: sidebar; background: #95A5A6; }
.content { grid-area: content; background: #ECF0F1; }
.footer { grid-area: footer; background: #34495E; color: white; }
.item {
padding: 20px;
border-radius: 8px;
}Bu kodda grid-template-areas içindeki string'ler, adeta bir tablo çiziyor. "header" iki kolonu kaplıyor, "content" ve "sidebar" yan yana, "footer" yine iki kolonu kaplıyor. Harika!
Mobilde Her Şeyi Alt Üst EtmekPeki ya mobilde? Mobilde sidebar'ın content'in altına, hatta belki footer'ın hemen üstüne gelmesini istiyoruz. İlk düşündüğüm, sadece grid-template-columns'u değiştirmekti ama bu yetmedi. Alanların sırası değişmedi. İşte bu hatayı ilk gördüğümde kafayı yemiştim. Çözüm ise inanılmaz basit: Media query içinde grid-template-areas'i TAMAMEN YENİDEN YAZMAK.
Tek yapmamız gereken, mobil ekran boyutunda yeni bir görsel harita tanımlamak. İşte benim kullandığım en temiz çözüm:
CSS:
@media (max-width: 768px) {
.container {
/ Kolon sayısını 1'e düşürüyoruz /
grid-template-columns: 1fr;
/ Satır yapısını da ihtiyaca göre ayarlayabiliriz /
grid-template-rows: auto auto auto auto;
/ VE İŞTE SİHİR: YENİ ALAN DÜZENİ /
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
}
}Bakın, media query'nin içinde sadece grid-template-areas değerlerini değiştirerek, tüm layout'u baştan aşağı yeniden düzenledik. Artık mobilde tüm elemanlar tek kolonda, sidebar içeriğin altında sıralanıyor. CSS Grid'in gücü işte burada!
İleri Seviye Bir İpucuPeki ya daha karmaşık bir senaryo? Diyelim ki tablet boyutunda (örneğin 769px ile 1024px arasında) sidebar'ı tamamen kaldırıp, header, content ve footer'dan oluşan daha basit bir layout istiyoruz. Bu durumda HTML'den sidebar'ı silmemize GEREK YOK. Sadece grid-template-areas haritasından onun yerini kaldırıp, CSS ile gizleyebiliriz.
CSS:
@media (min-width: 769px) and (max-width: 1024px) {
.container {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"content"
"footer"; / Sidebar yok! /
}
/ Sidebar'ı grid alanından çıkarıp görsel olarak gizliyoruz /
.sidebar {
display: none;
}
}Bu yaklaşım, içeriğin farklı cihazlarda tamamen farklı şekillerde sunulmasına olanak tanıyor. Arama motorları için hala orada olan, ancak kullanıcı deneyimi için gerektiğinde gizlenen veya yeniden konumlandırılan elemanlar.
Sonuç olarak, grid-template-areas sadece bir düzen aracı değil, aynı zamanda güçlü bir "responsive layout switch" mekanizması. Media query'lerle birlikte kullanıldığında, farklı breakpoint'lerde tamamen farklı sayfa şemaları oluşturabiliyorsunuz.
Siz CSS Grid'de responsive tasarım yaparken hangi yöntemleri kullanıyorsunuz? grid-template-areas dışında farklı bir teknikle bu kadar kolay layout değişimi yapabildiniz mi? Ya da bu yöntemle karşılaştığınız ilginç bir sorun oldu mu? Yorumlarda deneyimlerinizi paylaşın!