CSS Grid Alanları
Grid Öğeleri dersi çizgi numaralarını ve span’i öğretti. Adlandırılmış alanlar daha dostça bir soru sorar: sayfayı kelimelerle çizebilir misiniz — header, sidebar, main, footer — ve her çocuk bir etiket alsın mı? grid-template-areas haritadır; grid-area iğnedir.
Grid alanları araç kutusu
📊 Grid alanları bir bakışta
| Özellik / belirteç | Günlük iş |
|---|---|
grid-template-areas |
Konteynerde: tırnaklı satır dizgileri her hücreyi adlandırır |
grid-area |
Öğede: bu çocuğun hangi adlandırılmış bölgeyi kapladığı |
| Tekrarlanan ad | Komşu hücrelerde aynı ad = bir uzayan dikdörtgen |
. (nokta) |
Adsız boş hücre |
| Şablon track’leri | Boyutu hâlâ grid-template-columns / rows ile koyarsınız |
Her tırnaklı dizgi haritanın bir satırıdır. Satır içindeki adlar boşlukla ayrılır. Her satır aynı sayıda hücre listelemelidir; yoksa şablon geçersizdir.
grid-template-areas — haritayı çizin
Kastettiğiniz düzeni sade etiketlerle yazın. Klasik bir sayfa kabuğu çoğu zaman üç satırda dört adlandırılmış rol gibi görünür.
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"aside main"
"footer footer";
gap: 1rem;
}
grid-area — her çocuğu iğneleyin
Her çocuk haritadan bir ad seçer. Sınıf adları BEM tarzında kalabilir; Grid alan belirtecini okur.
.shell__header { grid-area: header; }
.shell__aside { grid-area: aside; }
.shell__main { grid-area: main; }
.shell__footer { grid-area: footer; }
Adı tekrarlayarak uzatın
Bir bölgeyi germek için, ona ait olması gereken her hücreye aynı adı yazın. Bölge sağlam bir dikdörtgen kalmalıdır — L şekli yok.
.magazine {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"hero hero hero"
"card1 card2 card3";
gap: 0.75rem;
}
.magazine__hero { grid-area: hero; }
Nokta ile boş hücreler
Tek bir . bir delik işaretler. Kart tahtası sahte bir ad uydurmadan boşluk bırakmalıysa işe yarar.
.board {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"alpha ."
"beta gamma";
gap: 0.5rem;
}
.board__a { grid-area: alpha; }
.board__b { grid-area: beta; }
.board__c { grid-area: gamma; }
Sakin adlandırılmış alan alışkanlığı
Haritayı grid-template-areas içinde çizin, track’leri columns/rows ile boyutlandırın, sonra çocukları grid-area ile iğneleyin. Adları kısa ve dikdörtgen tutun. Tek seferlik yerleşim tüm haritayı yeniden yazmaktan daha açıksa grid-column / grid-row’a dönün. Haritanın duyarlı yeniden yazımları Grid Responsive dersini bekler.
.page {
display: grid;
grid-template-columns: minmax(12rem, 16rem) 1fr;
grid-template-areas:
"nav content"
"nav content";
gap: 1.25rem;
}
.page__nav { grid-area: nav; }
.page__content { grid-area: content; }
Kendiniz deneyin
grid-template-areasile header / aside+main / footer haritası çizin.- Dört çocuğa eşleşen
grid-areadeğerleri verin. - İlk satırda
hero’yu tekrarlayan üç sütunlu bir hero kurun. - İkiye iki tahtada bir hücreyi
.ile boş bırakın. - Track boyutlarını konteynerde tutun; harita değişimini sonraki duyarlı Grid dersi için not edin.
Sık yapılan hatalar
- L şeklinde veya kopuk bir bölge adlandırma (alanlar dikdörtgen olmalı)
- Tırnaklı satırlar arasında uyumsuz hücre sayıları
grid-template-areas’ı konteyner yerine çocuğa koyma- Alan adlarını CSS sınıf seçicisi sanmak — bunlar şablon belirteçleridir
- Yalnızca adların boyut vereceğini umup
grid-template-columns/rows’u atma
Özet
- Adlandırılmış alanlar düzeni okunabilir bir hücre haritasına çevirir
grid-template-areaskonteynerde yaşar;grid-areaher öğede- Span için adı tekrarlayın; boş hücreler için
.kullanın - Bölgeleri dikdörtgen tutun ve adları track boyutlandırmayla eşleştirin
- Çizgi yerleşimi hâlâ çalışır; duyarlı harita değişiklikleri sonra gelir
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek