Özet - Magazin düzeni

CSS kursu · Orta seviye · Ders 45/98

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

Özet: Magazin düzeni

Bu özette dört kavramı birleştirip bir magazin düzeni kuracaksın: grid-column ile öğeleri sütun boyunca, grid-row ile satır boyunca yay; grid-template-areas ile adlandırılmış bölgeler tanımla; grid-area ile öğeleri bu bölgelere yerleştir.

Son adımda .magazine ızgarasının tüm bölgelerini tek bildirimle kuracaksın. Bu, gerçek dünya magazin sayfalarının iskeletidir.

Magazin sütunları minmax ile

Magazin düzeninde sütun genişlikleri genellikle esnektir: küçük ekranda daralır, geniş ekranda açılır. minmax(200px, 1fr) her sütunun en az 200px olmasını, varsa açıkta kalan alanı paylaşmasını sağlar.

Bunu grid-template-columns: repeat(3, minmax(200px, 1fr)) biçiminde kullanırsan; ızgara daraldıkça sütunlar 200px'e iner, daha fazlasını almaz.

Uygulama Magazin ızgarasını kur

.magazine ızgarasında dört bölge tanımla: header, hero, aside ve footer. Her bölge bir satırda, iki kez yan yana yazılsın (2 sütun). Toplam dört satır olsun. Yalnızca grid-template-areas bildirimini yaz.

Örnek çözümü göster

.magazine {
  grid-template-areas:
    "header header"
    "hero hero"
    "aside aside"
    "footer footer";
}

Kendini test et

Magazin hero'su 3 sütun kapsasın. Hangi bildirim?
```
.hero {
  /* ? */
}
```
- grid-template-columns: 3
- grid-row: 1 / span 3
- grid-column: 1 / span 3
- grid-area: 3
Cevabı göster

grid-column: 1 / span 3 — Doğru. grid-column sütunları kapsar; 1 / span 3 üç sütunu yayar.

Alt bilgiyi bölgesine yerleştir

.footer {
  grid-area: ____;
}

Cevabı göster

.footer {
  grid-area: footer;
}

Kavramı rolüyle eşleştir

grid-column

Sütun çizgileri arası yerleşim
grid-row

Satır çizgileri arası yerleşim
grid-template-areas

Adlandırılmış bölge tanımı
grid-area

Öğeyi bölgeye yerleştir
minmax()

Esnek boyut fonksiyonu

Özet - Magazin düzeni