Omadus grid-column-start

Omadus grid-column-start määrab elemendi algpositsiooni gridis või võrgus veergude kaupa. Omaduse väärtuseks võib olla positiivne või negatiivne number. Kui määrame positiivse numbri, siis elemendi algpositsiooni loendatakse vasakult paremale. Negatiivse numbri määramisel element paikneb vastupidises järjekorras, st paremalt vasakule.

Süntaks

selektor {
	grid-column-start: positiivne või negatiivne number;
}

Näide

Määrame gridis elementidele algpositsioonid:

<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-start: 1;
}
#elem2 {
	grid-column-start: 2;
}
#elem3 {
	grid-column-start: 3;
}

Näide

Nüüd määrame omaduses grid-column-start negatiivsed numbrid:

<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-start: -1;
}
#elem2 {
	grid-column-start: -2;
}
#elem3 {
	grid-column-start: -3;
}

Näide

Nüüd teeme omaduse grid-column-end abil nii, et esimene, teine ja kolmas element paikneksid esimeses reas. Neljas element hõlmaks kogu teist rida:

<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-start: 1;
	grid-column-end: 2;
}
#elem2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 3;
	grid-column-end: 4;
}
#elem4 {
	grid-column-start: 1;
	grid-column-end: 4;
}

Näide

Kõrvuti asetsevate elementide poolt hõivatud veergude kattumisel nihkub iga järgnev element ühe rea võrra allapoole. Võtame selle võimaluse arvesse ja teeme nii, et esimene element paikneb esimeses reas, teine - teises, kolmas ja neljas hõivaksid kolmanda rea:

<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-start: 1;
	grid-column-end: 4;
}
#elem2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: 2;
}
#elem4 {
	grid-column-start: 3;
	grid-column-end: 4;
}

Vaata ka

omadus grid-column-end,
mis määrab elemendi lõpppositsiooni gridis veergude kaupa
omadus grid-column,
mis määrab elemendi alg- ja lõpppositsioonid gridis veergude kaupa
omadus grid-template-columns,
mis määrab veergude arvu ja laiuse gridis
omadus grid-auto-columns,
mis määrab veergude arvu ja laiuse kaudses gridis