Omadus grid-column-end

Omadus grid-column-end määrab elemendi lõpppositsiooni gridis või võrgus kuni kindla veeruni. Omaduse väärtus võib olla positiivne või negatiivne number. Kui määrame positiivse numbri, siis elemendi lõpppositsioon loetakse vasakult paremale. Negatiivse numbri määramisel element paigutatakse vastupidises järjekorras, st. paremalt vasakule.

Oluline nüanss omadusel grid-column-end on see, et määratud veeru number ei kuulu elemendi lõpp- positsiooni - kui määrame numbri 3, siis element hõivab ainult esimese ja teise veeru.

Süntaks

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

Näide

Määrame elementidele gridis lõpppositsioonid:

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

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

Näide

Nüüd teeme omaduse grid-column-start abil nii, et esimene, teine ja kolmas element asuvad esimeses reas. Ja neljas element hõivaks kogu teise 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: 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

Kui naaberelementide poolt hõivatud veerud kattuvad, liigub iga järgnev element ühe rea võrra allapoole. Kasutame seda omadust, et panna esimene element esimesse ritta, teine - teise, ning kolmas ja neljas - kolmandasse ritta:

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

Näide

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

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

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

Vaata ka

omadus grid-column-start,
mis määrab elemendi algpositsiooni 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 implitsiitses gridis