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