Xüsusiyyət column-gap

Xüsusiyyət column-gap çoxsütunlu mətndə sütunlar arası məsafəni, həmçinin grid-də sütunlar arası məsafəni təyin edir. Xüsusiyyətin dəyəri olaraq hər hansı ölçü vahidləri və ya normal açar sözü (standart olaraq) istifadə oluna bilər, bu zaman brauzer özü sütunlar arası optimal məsafəni təyin edir.

Sintaksis

cssselektor {
  column-gap: dəyər;
}

Nümunə

Bu nümunədə sütunların sayı column-count (3 ədəd) və onlar arasındakı boşluq column-gap 50px olaraq təyin edilib. Sütunların eni isə avtomatik olaraq bu şərtlərə (sütun sayı və onlar arası məsafə) uyğun olaraq təyin olunacaq:

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

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

Результат:

Nümunə . Normal dəyəri

Bu nümunədə sütunun eni column-width 150px, onların sayı column-count auto dəyərində, aralarındakı boşluq column-gap isə normal dəyərində təyin edilib. Beləliklə, brauzer özü lazımi sayda sütunu və onlar arasındakı boşluğu təyin edəcək (lakin onların eni 150px olacaq):

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

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

Результат:

Nümunə

Gəlin grid-də sütunlar arası məsafəni təyin edək:

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;
}

Результат:

Nümunə

İndi isə gəlin sütunlar arası məsafəni % ilə təyin edək:

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;
}

Результат:

Həmçinin bax