column-gap xususiyati

column-gap xususiyati ko'p ustunli matndagi ustunlar orasidagi masofani, shuningdek, griddagi ustunlar orasidagi masofani belgilaydi. Xususiyat qiymati sifatida istalgan o'lchov birliklari yoki normal kalit so'zi (sukut bo'yicha) qo'llaniladi, bunda brauzer ustunlar orasidagi optimal masofani o'zi tanlaydi.

Sintaksis

cssselector {
  column-gap: qiymat;
}

Misol

Ushbu misolda ustunlar soni column-count (3 ta) va ular orasidagi masofa column-gap 50px da belgilangan. Ustunlarning kengligi esa ushbu shartlarga (ustunlar soni va ular orasidagi masofaga) mos keladigan tarzda avtomatik ravishda sozlanadi:

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

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

Результат:

Misol . Normal qiymati

Ushbu misolda ustun kengligi column-width 150px da, ularning soni column-count auto qiymatida, ular orasidagi masofa column-gap esa normal qiymatida belgilangan. Shunday qilib, brauzer kerakli ustunlar sonini va ular orasidagi masofani o'zi tanlaydi (lekin ularning kengligi 150px bo'ladi):

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

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

Результат:

Misol

Keling, griddagi ustunlar orasidagi masofani belgilaymiz:

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

Результат:

Misol

Endi esa ustunlar orasidagi masofani % da belgilaymiz:

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

Результат:

Shuningdek qarang