CSS ızgara aralığı Özellik
Örnek
Satırlar ve sütunlar arasındaki boşluğu 50 piksele ayarlayın :
.grid-container {
grid-gap: 50px;
}
Tanım ve Kullanım
Özellik , bir ızgara düzeninde satırlar vegrid-gap
sütunlar arasındaki boşluğun boyutunu tanımlar ve aşağıdaki özellikler için bir kestirme özelliktir:
Not: Bu özellik CSS3'te yeniden adlandırıldı .
gap
Varsayılan değer: | 0 0 |
---|---|
Miras: | Hayır |
canlandırılabilir: | Evet. Canlandırılabilir hakkında bilgi edinin |
Sürüm: | CSS Izgara Düzen Modülü Seviye 1 |
JavaScript sözdizimi: | nesne .style.gridGap="50px 100px" |
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Property | |||||
---|---|---|---|---|---|
grid-gap | 57 | 16 | 52 | 10 | 44 |
CSS Sözdizimi
grid-gap: grid-row-gap grid-column-gap;
Mülk değerleri
Value | Description | Play it |
---|---|---|
grid-row-gap | Sets the size of the gap between the rows in a grid layout. 0 is the default value | |
grid-column-gap | Sets the size of the gap between the columns in a grid layout. 0 is the default value |
Daha fazla örnek
Örnek
Satırlar arasındaki boşluğu 20 piksele ve sütunlar arasındaki boşluğu 50 piksele ayarlayın:
.grid-container {
grid-gap: 20px 50px;
}
İlgili Sayfalar
CSS eğitimi: CSS Izgara Düzeni
CSS referansı: grid-row-boşluk özelliği
CSS referansı: grid-column-gap özelliği