Vetia column-gap

Vetia column-gap përcakton distancën midis kolonave në tekst shumëkolonash, si dhe distancën midis kolonave në grid. Vlera e vetisë janë çdo njësi për madhësi ose fjala kyçe normal (parazgjedhur), ku shfletuesi vete zgjedh distancën optimale midis kolonave.

Sintaksa

përzgjedhës {
	column-gap: vlerë;
}

Shembull

Në këtë shembull është specifikuar numri i kolonave column-count (3 copë) dhe hapësira midis tyre column-gap në 50px. Ndërsa gjerësia e kolonave automatikisht do të përshtatet ashtu që të plotësojë këto kushte (numrin e kolonave dhe distancën midis tyre):

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

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

Shembull . Vlera normal

Në këtë shembull është specifikuar gjerësia e kolonës column-width në 150px, numri i tyre column-count është në vlerën auto, ndërsa hapësira column-gap midis tyre - në vlerën normal. Kështu, shfletuesi vetë zgjedh numrin e nevojshëm të kolonave dhe hapësirën midis tyre (por gjerësia e tyre do të jetë 150px):

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

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

Shembull

Le të përcaktojmë distancën midis kolonave në 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;
}

Shembull

Tani le të përcaktojmë distancën midis kolonave në %:

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

Shihni gjithashtu

vetia column-width,
e cila përcakton gjerësinë e kolonës
vetia column-count,
e cila përcakton numrin e kolonave
vetia gap,
e cila përcakton distancën midis elementeve në grid
vetia row-gap,
e cila përcakton distancën midis rreshtave në grid