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

selektor {
	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):

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

#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):

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

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

Eksempel

Lad os angive afstanden mellem søjler i et grid:

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

#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 %:

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

#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å

egenskaben column-width,
som angiver bredden af en kolonne
egenskaben column-count,
som angiver antallet af kolonner
egenskaben gap,
som angiver afstanden mellem elementer i et grid
egenskaben row-gap,
som angiver afstanden mellem rækker i et grid