Savybė grid-column-end

Savybė grid-column-end nurodo elemento pabaigos poziciją tinklelyje arba gardelėje iki tam tikro stulpelio. Savybės reikšmė gali būti teigiamas arba neigiamas skaičius. Jei nustatome teigiamą skaičių, tai elemento pabaigos pozicija skaičiuojama iš kairės į dešinę. Nurodžius neigiamą skaičių elementas bus išdėstytas atvirkštine tvarka, t.y. iš dešinės į kairę.

Svarbus savybės grid-column-end niuansas yra tas, kad nurodyto stulpelio numeris neįtraukiamas į pabaigos poziciją - jei mes nustatysime skaičių 3, tai elementas užims tik pirmą ir antrą stulpelius.

Sintaksė

selektorius {
	grid-column-end: teigiamas arba neigiamas skaičius;
}

Pavyzdys

Nustatykime elementams tinklelyje pabaigos pozicijas:

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

Pavyzdys

O dabar naudodami savybę grid-column-start padarykime taip, kad pirmas, antras ir trečias elementai būtų išdėstyti pirmoje eilėje. O ketvirtas elementas užimtų visą antrą eilę:

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

Pavyzdys

Kai persidengia kaimyninių elementų užimami stulpeliai, kiekvienas paskesnis elementas perstumiamas viena eile žemiau. Panaudokime šią ypatybę padarydami taip, kad pirmas elementas būtų išdėstytas pirmoje eilėje, antras - antroje, o trečias ir ketvirtas - trečioje eilėje:

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

Pavyzdys

O dabar savybėje grid-column-end nurodykime neigiamus skaičius:

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

Taip pat žiūrėkite

savybė grid-column-start,
kuri nurodo elemento pradinę poziciją tinklelyje pagal stulpelius
savybė grid-column,
kuri nurodo elemento pradinę ir galinę pozicijas tinklelyje pagal stulpelius
savybė grid-template-columns,
kuri nurodo stulpelių skaičių ir plotį tinklelyje
savybė grid-auto-columns,
kuri nurodo stulpelių skaičių ir plotį numanomame tinklelyje