Özet - Foto galeri

CSS kursu · Orta seviye · Ders 39/98

Grid ile foto galeri ızgarası kurarsın.

Özet: Foto galeri ızgarası

Bu grupta dört temel taş öğrendin: display: grid ile kapsayıcıyı açtın, grid-template-columns ile sütunları çizdin, gap ile hücreler arası boşluk koydun, repeat() ile tekrarları kısalttın.

Bu dördü bir araya gelince gerçek bir foto galeri ızgarası doğar: az kodla, çok sayıda görseli öz biçimde dizer. Şimdi bunu baştan kuracağız.

Uygulama Üç sütunlu foto galeriyi baştan kur

.gallery için tam bir ızgara şablonu kur: display: grid, grid-template-columns: repeat(3, 1fr) ve gap: 16px bildirimlerini ekle.

Örnek çözümü göster

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

Uygulama Dört sütunlu ürün kartları

Bu kez bir mağaza ızgarası kur: .product-grid için display: grid, grid-template-columns: repeat(4, 1fr) ve gap: 24px bildirimlerini ekle.

Örnek çözümü göster

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

Kendini test et

Hangi bildirim her iki eksene 20px boşluk koyar?
```
/* galeriye boşluk ekle */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  ?
}
```
- padding: 20px
- margin: 20px
- gap: 20px
- spacing: 20px
Cevabı göster

gap: 20px — Doğru. gap: 20px hem satır hem sütun arasına 20 piksel koyar.

Üç sütunlu galeri şablonu

.gallery {
  display: grid;
  grid-template-columns: ____;
  gap: 16px;
}

Cevabı göster

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

Özet - Foto galeri