Meydan okuma - Grid magazin

Grid-template-areas ile magazin düzeni kurarsın.

Grid-template-areas ile magazin

Magazin sayfaları gibi adlandırılmış bölgeleri olan düzenler kurmanın en okunaklı yolu grid-template-areas'tır. .page kabına display: grid verilir; sütun ve satır boyutları grid-template-columns ve grid-template-rows ile belirlenir.

Sonra her hücreye bir ad verilir: "header header header" "sidebar main main". .header etiketine grid-area: header dersen otomatik yerleşir. Şablon kodu görsel olarak okunur; yer değiştirmek adları kaydırmakla kalır.

Uygulama Magazin şablonunu kur

Aşağıdaki CSS'i tamamla. .page kabına display: grid ver ve üç eşit sütunlu (her biri 1fr) bir şablon kur. Üst satır "header header header", alt satır "sidebar main main" bölgelerini tanımlasın. .header ve .sidebar etiketleri ilgili bölgelere yerleşsin.

Örnek çözümü göster

/* sayfa kabı */
.page {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "header header header"
    "sidebar main main";
}

/* başlık */
.header {
  grid-area: header;
}

/* kenar çubuğu */
.sidebar {
  grid-area: sidebar;
}

Kendini test et

grid-area: header bildirimi ne yapar?
```
.page {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main";
}
.header {
  grid-area: header;
}
```
- Etiketi adlandırılmış bölgeye yerleştirir
- Bölgeyi yeniden boyutlandırır
- Bölgeye arka plan rengi verir
- Bölgeyi gizler
Cevabı göster

Etiketi adlandırılmış bölgeye yerleştirir — Doğru. grid-area: header, etiketi şablondaki header bölgesine otomatik yerleştirir.

grid-area bildirimini tamamla

.header {
  grid-area: ____;
}

Cevabı göster

.header {
  grid-area: header;
}

Grid özelliğini rolüyle eşleştir

grid-template-areas

Hücreleri adlarla şablonlar
grid-area

Etiketi adlandırılmış bölgeye koyar
grid-template-columns

Sütun genişliklerini belirler
grid-template-rows

Satır yüksekliklerini belirler
display: grid

Kabı ızgara yapar

Sıradaki ders: Meydan okuma - Duyarlı navbar

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler