Egenskaben column-gap

Egenskaben column-gap angiver afstanden mellem kolonner i tekst med flere kolonner, samt afstanden mellem søjler i et grid. Egenskabens værdi er enhver enhed for størrelser eller nøgleordet normal (som standard), hvor browseren selv vælger den optimale afstand mellem kolonner.

Syntaks

cssselektor {
  column-gap: værdi;
}

Eksempel

I dette eksempel er antallet af kolonner angivet column-count (3 stykker) og mellemrummet mellem dem column-gap sat til 50px. Og bredden af kolonnerne tilpasses automatisk for at opfylde disse betingelser (antallet af kolonner og afstanden mellem dem):

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

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

Результат:

Eksempel . Værdien normal

I dette eksempel er bredden af en kolonne angivet column-width sat til 150px, deres antal column-count er sat til værdien auto, og mellemrummet column-gap mellem dem - til værdien normal. Dermed vil browseren selv vælge det nødvendige antal kolonner og mellemrummet mellem dem (men deres bredde vil være 150px):

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

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

Результат:

Eksempel

Lad os angive afstanden mellem søjler i et 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;
}

Результат:

Eksempel

Og lad os nu angive afstanden mellem søjler i %:

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

Результат:

Se også