Grid gap
gap ile ızgara hücreleri arasındaki boşluğu öğrenirsin.
Hücreler arası boşluk
Izgara hücreleri varsayılan olarak birbirine yapışır. Aralarına boşluk koymak için gap özelliğini kullanırsın; Flexbox'tan tanıdığın aynı isim. gap: 16px hem satır hem sütun arasına 16 piksel koyar.
Tek değer yerine iki değer de yazılabilir: gap: 16px 8px. İlk değer satırlar arası, ikinci değer sütunlar arası boşluktur. Sıra önemlidir: önce satır, sonra sütun.
row-gap ve column-gap
Bazen satır ve sütun boşluklarını ayrı ayrı ayarlamak istersin. Bunun için row-gap ve column-gap özellikleri vardır. row-gap: 24px; column-gap: 12px yazarsan satırlar geniş, sütunlar dardır.
gap: 24px 12px kısayolu da aynı anlama gelir: ilk değer row-gap, ikinci değer column-gap. İki yazım birbirine eşdeğerdir; hangisini seçeceğin stil tercihidir.
Uygulama Galeriye boşluk ekle
.gallery zaten display: grid ve grid-template-columns: repeat(3, 1fr) içeriyor. İçine gap: 20px bildirimini ekle; böylece fotoğraflar arasında 20 piksel boşluk olur.
Örnek çözümü göster
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}Kendini test et
-
gap: 12px ne yapar?
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }- Her hücreye 12px padding ekler
- Yalnızca satırlar arasına 12px boşluk koyar
- Yalnızca sütunlar arasına 12px boşluk koyar
- Hem satır hem sütun arasına 12px boşluk koyar
Cevabı göster
Hem satır hem sütun arasına 12px boşluk koyar — Doğru. Tek değerli gap hem satır hem sütun arasına aynı boşluğu koyar; burada 12px.
-
Satır geniş, sütun dar
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: ____; }Cevabı göster
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 8px; } -
Boşluk bildirimini açıklamasına eşle
- gap: 12px
- Her iki eksen 12px
- gap: 16px 8px
- Satır 16, sütun 8
- row-gap: 20px
- Yalnız satır 20px
- column-gap: 4px
- Yalnız sütun 4px