CSS grid-gap özelliği

Tanım ve kullanım

grid-gap özelliği, ağırlıklandırma çerçevesinde satır ve sütun arasındaki boşluğun boyutunu tanımlar; bu, aşağıdaki özelliklerin kısaltma özelliğidir:

Dikkat:Bu özellik CSS3'te yeniden adlandırılmıştır: aralık.

Ayrıca bakınız:

CSS eğitim:CSS ağırlıklandırma

CSS referans el kitabı:grip-row-gap özelliği

CSS referans el kitabı:grip-column-gap özelliği

Örnek

Örnek 1

Satır ve sütun arasındaki kısaltmayı 50 piksel olarak ayarlayın:

.grid-container {
  grid-gap: 50px;
}

Kişisel olarak deneyin

Örnek 2

Satır arası boşluğu 20 piksel, sütun arası boşluğu 50 piksel olarak ayarlayın:

.grid-container {
  grid-gap: 20px 50px;
}

Kişisel olarak deneyin

CSS dilbilgisi

grid-gap: grid-row-gap grid-column-gap;

Özellik değeri

Değer Açıklama
grid-row-gap Ağ çerçevesinde satır arası boşluğun boyutunu ayarlayın. Varsayılan değeri 0'dır.
grid-column-gap Sütun arası boşluğun boyutunu ayarlayın. Varsayılan değeri 0'dır.

Teknik ayrıntılar

Varsayılan değer: 0 0
Devralma: Hayır
Animasyon yapımı: Destekleniyor. Ayrıca bakınız:Animasyonla ilgili özellikler.
Sürüm: CSS Grid Layout Modülü Seviye 1
JavaScript dilbilgisi: object.style.gridGap="50px 100px"

Tarayıcı desteği

Tablodaki sayılar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44