Īpašība column-gap

Īpašība column-gap nosaka attālumu starp kolonnām daudzkolonnu tekstā, kā arī attālumu starp kolonnām gridā. Īpašības vērtība var būt jebkuras mērvienības izmēriem vai atslēgvārds normal (pēc noklusējuma), kurā pārlūkprogramma pati izvēlas optimālo attālumu starp kolonnām.

Sintakse

cssselektors {
  column-gap: vērtība;
}

Piemērs

Šajā piemērā ir norādīts kolonnu skaits column-count (3 gabali) un atstarpe starp tām column-gap 50px. Un kolonnu platums tiks automātiski izvēlēts tā, lai atbilstu šiem nosacījumiem (kolonnu skaitam un attālumam starp tām):

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

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

Результат:

Piemērs . Vērtība normal

Šajā piemērā ir norādīts kolonnas platums column-width 150px, to skaits column-count ir iestatīts vērtībā auto, un atstarpe column-gap starp tām - vērtībā normal. Tādējādi pārlūkprogramma pati izvēlēsies nepieciešamo kolonnu skaitu un atstarpi starp tām (bet to platums būs 150px):

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

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

Результат:

Piemērs

Uzstādīsim attālumu starp kolonnām gridā:

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

Результат:

Piemērs

Un tagad uzstādīsim attālumu starp kolonnām %:

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

Результат:

Skatiet arī