თვისება column-gap

თვისება column-gap ადგენს მანძილს სვეტებს შორის მრავალსვეტიან ტექსტში, ასევე მანძილს სვეტებს შორის ბადეში (grid). თვისების მნიშვნელობა შეიძლება იყოს ნებისმიერი ერთეული ზომებისთვის ან საკვანძო სიტყვა 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;
}

მაგალითი

მოდით, დავაყენოთ მანძილი სვეტებს შორის ბადეში (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;
}

მაგალითი

ახლა კი მოდით დავაყენოთ მანძილი სვეტებს შორის %-ში:

<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,
რომელიც ადგენს მანძილს რიგებს შორის ბადეში