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 касиети,
гриддеги катарлардын ортосундагы аралыкты белгилейт