Grid-column häsiýeti

grid-column häsiýeti grid ýa-da tor içindäki elementiň sütünler boýunça başlangyç we gutarnyk ýagdaýyny kesgitleýär. Häsiýetiň bahalary ýatgy ýa-da ters belgili sanlar bolup biler, sleş bilen bölünip görkezilýär. Birinji san elementiň başlangyç ýagdaýyny, ikinji san - gutarnyk ýagdaýyny görkezýär.

Eger baha hökmünde ýatgy san görkezilse, onda elementiň ýagdaýy çepden saga çenli hasaplanýar. Ters belgili san görkezilende element ters tertipde ýerleşer, ýagny sagdan çepa.

Sintaksis

selektory {
	grid-column: başlangyç ýagdaýy / gutarnyk ýagdaýy;
}

Mysal

Gride elementiň başlangyç we gutarnyk ýagdaýlaryny belleýäli:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / 2;
}
#elem2 {
	grid-column: 1 / 3;
}
#elem3 {
	grid-column: 1 / 4;
}

Mysal

Indi bolsa grid-column häsiýetinde ters belgili sanlary görkezeli:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / -2;
}
#elem2 {
	grid-column: 1 / -3;
}
#elem3 {
	grid-column: 1 / -4;
}

Mysal

Indi şeýle edeli, ýagny birinji, ikinji we üçünji elementler birinji hatarda ýerleşsin. Dördünji element bolsa ikinji hataryň hemmesini eýelesin:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	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;
}
#elem4 {
	grid-column: 1 / 4;
}

Mysal

Golaýdaýan elementleriň eýeleýän sütünleriň üst-üstüne düşmegi bilen, her bir soňky element bir hatar aşak süýşýär. Bu aýratynlygy ulanmak bilen birinji element birinji hatarda, ikinji - ikinji hatarda, üçünji we dördünji bolsa üçünji hatarda ýerleşsin:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / 4;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 1 / 2;
}
#elem4 {
	grid-column: 3 / 4;
}

Mysal

grid-column we grid-row häsiýetlerini birikdireli:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 3;
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 1 / 2;
}
#elem4 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}

Mysal

Indi bolsa şeýle edeli, ýagny birinji we bäşinji bloklar bütin hatary eýelesin, ikinji blok bolsa iki hatar we iki sütün, üçünji we dördünji bloklar bolsa bir hatar we iki sütün eýelesin:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
	<div id="elem5">5</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 4;
}
#elem2 {
	grid-row: 2 / 4;
	grid-column: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}
#elem4 {
	grid-row: 3 / 3;
	grid-column: 2 / 4;
}
#elem5 {
	grid-row: 4 / 5;
	grid-column: 1 / 4;
}

Şeýle-de göz aýlaň

grid-row häsiýeti,
grid içindäki elementiň hatarlar boýunça başlangyç we gutarnyk ýagdaýyny kesgitleýär
grid-column-start häsiýeti,
grid içindäki elementiň sütünler boýunça başlangyç ýagdaýyny kesgitleýär
grid-column-end häsiýeti,
grid içindäki elementiň sütünler boýunça gutarnyk ýagdaýyny kesgitleýär
grid-template-columns häsiýeti,
griddäki sütünleriň sanyny we ini göwrümini kesgitleýär
grid-auto-columns häsiýeti,
görkezilmedik griddäki sütünleriň sanyny we ini göwrümini kesgitleýär