Özet - Çok sütunlu sayfa

CSS kursu · Orta seviye · Ders 57/98

Duyarlı çok sütunlu bir sayfa düzeni kurarsın.

Özet: Çok sütunlu sayfa

Bu özette beş kavramı birleştirip duyarlı bir çok sütunlu sayfa kuracaksın: mobil öncelikli temel stiller, auto-fit ile duyarlı kart ızgarası, flex-wrap ile esnek etiket satırı, display: none ile mobilde yan menüyü gizleme ve @media print ile yazdırma düzeni.

Son adımda yazdırma bloğunu yazarak çıktının da temiz olmasını sağlayacaksın.

Sayfanın yazdırma düzeni

Çok sütunlu sayfa yazdırılırken menü, reklam ve form gibi öğeleri gizlersin; yazı rengini siyah, arka planı beyaz yaparsın. @media print bloğu çıktının temiz ve mürekkep dostu olmasını sağlar.

Sayfa zaten mobil öncelikli kurulduğu için yazdırma bloğu yalnızca birkaç bildirim içerir: gereksiz öğeleri display: none ile kaldırmak yeter.

Uygulama Yazdırma bloğunu kur

Çok sütunlu sayfa yazdırılırken .nav (menü) ve .ads (reklam) öğelerini gizle. Bir @media print bloğu aç ve içinde her iki öğeyi display: none ile kaldır.

Örnek çözümü göster

@media print {
  .nav,
  .ads {
    display: none;
  }
}

Kendini test et

Çok sütunlu sayfada dar ekranda yan menü için en uygun yöntem?
```
/* ? */
.sidebar { ____ }
```
- Masaüstü stillerini mobile kopyala
- Yan menüyü her zaman göster
- Yan menüyü yazdırma stilleriyle gizle
- display: none ile mobilde gizle
Cevabı göster

display: none ile mobilde gizle — Doğru. display: none ile mobilde gizleyip, geniş ekranda display: block ile geri getirirsin.

Duyarlı kart ızgarası

.cards {
  display: grid;
  grid-template-columns: repeat(____, minmax(180px, 1fr));
  gap: 1rem;
}

Cevabı göster

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

Kavramı sayfadaki rolüyle eşleştir

Mobil öncelikli

Temel stiller küçük ekran
auto-fit + minmax

Duyarlı kart ızgarası
flex-wrap

Esnek etiket satırı
display: none

Mobilde yan menüyü gizle
@media print

Yazdırma düzeni

Özet - Çok sütunlu sayfa