Column-gap қасиеті

column-gap қасиеті көп бағанды мәтіндегі бағандар арасындағы қашықтықты, сондай-ақ гридтегі бағандар арасындағы қашықтықты белгілейді. Қасиет мәні ретінде кез келген өлшем бірліктері немесе normal кілт сөзі (әдепкі бойынша) қолданылады, бұл кезде браузер бағандар арасындағы оңтайлы қашықтықты өзі таңдап алады.

Синтаксис

селектор {
	column-gap: мән;
}

Мысал

Бұл мысалда бағандар саны column-count (3 дана) және олардың арасындағы аралық column-gap 50px деп көрсетілген. Ал бағандардың ені осы шарттарға (бағандар саны мен олардың арасындағы қашықтық) сәйкес автоматты түрде таңдалады:

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

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

Мысал . Normal мәні

Бұл мысалда бағанның ені column-width 150px, олардың саны column-count auto мәнінде, ал аралық column-gap олардың арасында - normal мәнінде. Осылайша, браузер қажетті бағандар саны мен олардың арасындағы аралықты өзі таңдап алады (бірақ олардың ені 150px болады):

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

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

Мысал

Гридтегі бағандар арасындағы қашықтықты белгілейік:

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

Мысал

Енді бағандар арасындағы қашықтықты %-пен белгілейік:

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

Сондай-ақ қараңыз

column-width қасиеті,
бағанның енін белгілейді
column-count қасиеті,
бағандар санын белгілейді
gap қасиеті,
гридтегі элементтер арасындағы қашықтықты белгілейді
row-gap қасиеті,
гридтегі қатарлар арасындағы қашықтықты белгілейді