Sidebar ve üst bilgi
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 ögeyi 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.
Örnek çözümü göster
/* 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; }Kendini test et
-
grid-template-areas değerinde satırları nasıl ayırırız?
- Virgülle
- Her satırı tırnak içine alarak
- Noktalı virgülle
- Tire ile
Cevabı göster
Her satırı tırnak içine alarak — Doğru. Her satır çift tırnak içinde yazılır; satırlar boşlukla ayrılır.
-
.header bölümünü üst bilgi bölgesine yerleştir
.header { ____; }Cevabı göster
.header { grid-area: header; } -
Grid bildirimlerini görevleriyle eşleştir
- display: grid
- grid kapsayıcı
- grid-template-columns
- sütun genişlikleri
- grid-template-areas
- bölge adları haritası
- grid-area
- ögeyi bölgeye yerleştir