Grid-column-end қасиеті

grid-column-end қасиеті элементтің гридтегі немесе тордағы аяқталу орнын белгілі бір бағанға дейін белгілейді. Қасиет мәні оң немесе теріс сан болуы мүмкін. Егер оң сан берсек, элементтің аяқталу орны солдан оңға қарай саналады. Теріс сан көрсеткенде элемент кері ретпен орналасады, яғни оңнан солға қарай.

grid-column-end қасиетінің маңызды ерекшелігі көрсетілген баған нөмірі элементтің аяқталу орнына енбейді - егер біз 3 санын белгілесек, элемент тек бірінші және екінші бағандарды алады.

Синтаксис

селектор {
	grid-column-end: оң немесе теріс сан;
}

Мысал

Гридтегі элементтерге аяқталу орындарын белгілейік:

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

Мысал

Енді grid-column-start қасиетінің көмегімен бірінші, екінші және үшінші элементтер бірінші қатарда орналасуы үшін жасайық. Ал төртінші элемент бүкіл екінші қатарды алады:

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

Мысал

Көрші элементтер алатын бағандардың қайталануы кезінде әрбір келесі элемент төменгі қатарға ығысады. Осы ерекшелікті пайдаланып, бірінші элемент бірінші қатарда, екінші - екіншіде, ал үшінші және төртінші - үшінші қатарда орналасуы үшін жасайық:

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

Мысал

Енді grid-column-end қасиетінде теріс сандарды көрсетейік:

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

Сондай-ақ қараңыз

grid-column-start қасиеті,
ол элементтің гридтегі бағандар бойынша басталу орнын белгілейді
grid-column қасиеті,
ол элементтің гридтегі бағандар бойынша басталу және аяқталу орындарын белгілейді
grid-template-columns қасиеті,
ол гридтегі бағандардың саны мен енін белгілейді
grid-auto-columns қасиеті,
ол жасырын гридтегі бағандардың саны мен енін белгілейді