Sifa column-gap

Sifa column-gap huweka umbali kati ya safu wima katika maandishi yenye safu wima nyingi, na pia umbali kati ya safu wima katika gridi. Thamani ya sifa inaweza kuwa vitengo vyovyote vya ukubwa au neno kuu normal (msingi), ambapo kivinjari huchagua peke yake umbali bora kati ya safu wima.

Kiendeshaji

kichagua {
	column-gap: thamani;
}

Mfano

Katika mfano huu umeonyeshwa idadi ya safu wima column-count (3) na pengo kati yao column-gap ya 50px. Na upana wa safu wima utawekwa otomatiki ili kukidhi hali hizi (idadi ya safu wima na umbali kati yao):

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

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

Mfano . Thamani normal

Katika mfano huu umeonyeshwa upana wa safu wima column-width ya 150px, idadi yao column-count iko katika thamani auto, na pengo column-gap kati yao - katika thamani normal. Hivyo, kivinjari huchagua peke yake idadi inayohitajika ya safu wima na pengo kati yao (lakini upana wao utakuwa 150px):

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

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

Mfano

Wacha tuweke umbali kati ya safu wima katika gridi:

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

Mfano

Sasa wacha tuweke umbali kati ya safu wima kwa %:

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

Angalia pia

sifa column-width,
ambayo huweka upana wa safu wima
sifa column-count,
ambayo huweka idadi ya safu wima
sifa gap,
ambayo huweka umbali kati ya vipengele katika gridi
sifa row-gap,
ambayo huweka umbali kati ya safu mlalo katika gridi