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

Sıradaki ders: KPI kartları

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler