Sidebar ve üst bilgi
- CSS kursu
- İleri seviye
- Ders 44/52
- 5 dk
Grid ile sidebar ve üst bilgi düzeni kurarsın.
CSS grid ile panel iskeleti
Bir satış panelinde tipik olarak üç bölge vardır: yan menü (sidebar), üst bilgi (header) ve içerik (main). Bu üç bölgeyi en temiz şekilde display: grid ile yan yana ve alt alta yerleştiririz.
Grid, sütun ve satırları önceden tanımlar; sonra her öğeyi bir grid bölgesine (grid area) yerleştiririz. Böylece HTML sırası ne olursa olsun, görsel yerleşimi CSS'te belirleriz.
grid-template-areas ile üç bölge
Üç bölgeyi yerleştirmek için grid-template-columns, grid-template-rows ve grid-template-areas bildirimlerini birlikte kullanırız. areas değerinde her satır bir metin, her kelime bir bölge adıdır:
.dashboard {
display: grid;
grid-template-columns: 220px 1fr;
grid-template-rows: 60px 1fr;
grid-template-areas:
"sidebar header"
"sidebar main";
}Burada sidebar iki satırı da kaplar; header ve main yan yana gelir.
Yan menü ve üst bilgi stilleri
Bölgeleri yerleştirdikten sonra her birine temel stiller veririz. Yan menü koyu bir arka plan, üst bilgi ise panel başlığı ve küçük bir alt çizgi alır. Şimdilik renkleri doğrudan yazıyoruz; ileride bunları var() ile değişkenleştireceğiz.
İçerik bölgesi (.main) panelin geri kalanını kaplar; arka planı açık tutarız.
Uygulama Panel iskeletini kur: .dashboard + üç bölge
Stil sayfasına bir .dashboard bölümü ekle. display: grid ver, iki sütunlu (220px 1fr) ve iki satırlı (60px 1fr) bir yapı kur, grid-template-areas ile sidebar, header ve main bölgelerini yerleştir. Sonra .sidebar, .header ve .main seçicilerine karşılık gelen grid-area bildirimlerini ekle.
Başlangıç kodu
/* Satış Paneli stil sayfası */
:root {
--bg: #f5f7fa;
--card-bg: #ffffff;
}Örnek çözüm
/* Satış Paneli stil sayfası */
:root {
--bg: #f5f7fa;
--card-bg: #ffffff;
}
.dashboard {
display: grid;
grid-template-columns: 220px 1fr;
grid-template-rows: 60px 1fr;
grid-template-areas:
"sidebar header"
"sidebar main";
}
.sidebar { grid-area: sidebar; }
.header { grid-area: header; }
.main { grid-area: main; }Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 grid-template-areas değerinde satırları nasıl ayırırız?
- Virgülle
- Tire ile
- Noktalı virgülle
- Her satırı tırnak içine alarak Doğru cevap
Açıklama: Her satır çift tırnak içinde yazılır; satırlar boşlukla ayrılır.
2 .header bölümünü üst bilgi bölgesine yerleştir
.header {
____;
}.header {
grid-area: header;
}Açıklama: grid-area bildirimi öğeyi ilgili bölgeye yerleştirir.
3 Grid bildirimlerini görevleriyle eşleştir
| Kavram | Anlamı |
|---|---|
display: grid |
grid kapsayıcı |
grid-template-columns |
sütun genişlikleri |
grid-template-areas |
bölge adları haritası |
grid-area |
öğeyi bölgeye yerleştir |