column-gzap Özelliği

column-gap özelliği, çok sütunlu metinlerde sütunlar arasındaki mesafeyi ve grid'de sütunlar arasındaki mesafeyi belirler. Özelliğin değeri olarak herhangi bir boyut birimi veya varsayılan olan normal anahtar kelimesi kullanılır, bu durumda tarayıcı sütunlar arasında optimum mesafeyi kendisi belirler.

Sözdizimi

cssseçici {
  column-gap: değer;
}

Örnek

Bu örnekte sütun sayısı column-count (3 adet) ve aralarındaki boşluk column-gap 50px olarak belirtilmiştir. Sütun genişlikleri ise bu koşulları (sütun sayısı ve aralarındaki mesafe) karşılayacak şekilde otomatik olarak ayarlanacaktır:

html<div id="elem">
  some long text
</div>

css#elem {
  column-count: 3;
  column-gap: 50px;
  text-align: justify;
}

Результат:

Örnek . Normal Değeri

Bu örnekte sütun genişliği column-width 150px, sayısı column-count auto değerinde, ve aralarındaki boşluk column-gap ise normal değerindedir. Böylece tarayıcı gerekli sütun sayısını ve aralarındaki boşluğu kendisi belirleyecektir (ancak genişlikleri 150px olacaktır):

html<div id="elem">
  some long text
</div>

css#elem {
  column-gap: normal;
  column-count: auto;
  column-width: 150px;
  text-align: justify;
}

Результат:

Örnek

Grid'de sütunlar arasına mesafe belirleyelim:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#parent {
  display: grid;
  column-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-column: 1 / 2;
}
#elem2 {
  grid-column: 2 / 3;
}
#elem3 {
  grid-column: 3 / 4;
}

Результат:

Örnek

Şimdi de sütunlar arası mesafeyi % olarak belirleyelim:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#parent {
  display: grid;
  column-gap: 5%;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-column: 1 / 2;
}
#elem2 {
  grid-column: 2 / 3;
}
#elem3 {
  grid-column: 3 / 4;
}

Результат:

Ayrıca Bakınız