Sifat column-gap

Sifat column-gap menetapkan jarak antara lajur dalam teks berbilang lajur, dan juga jarak antara lajur dalam grid. Nilai sifat adalah sebarang unit untuk saiz atau kata kunci normal (lalai), di mana pelayar sendiri memilih jarak optimum antara lajur.

Sintaks

pemilih {
	column-gap: nilai;
}

Contoh

Dalam contoh ini, bilangan lajur ditentukan column-count (3 keping) dan jarak antara mereka column-gap sebanyak 50px. Dan lebar lajur akan secara automatik disesuaikan untuk memenuhi syarat-syarat ini (bilangan lajur dan jarak antara mereka):

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

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

Contoh . Nilai normal

Dalam contoh ini, lebar lajur ditentukan column-width sebanyak 150px, bilangan mereka column-count adalah dalam nilai auto, dan jarak column-gap antara mereka - dalam nilai normal. Oleh itu, pelayar sendiri akan memilih bilangan lajur yang diperlukan dan jarak antara mereka (tetapi lebarnya akan 150px):

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

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

Contoh

Mari tetapkan jarak antara lajur dalam 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;
}

Contoh

Dan sekarang mari tetapkan jarak antara lajur dalam %:

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

Lihat juga

sifat column-width,
yang menetapkan lebar lajur
sifat column-count,
yang menetapkan bilangan lajur
sifat gap,
yang menetapkan jarak antara elemen dalam grid
sifat row-gap,
yang menetapkan jarak antara baris dalam grid