grid-column-end xususiyati

grid-column-end xususiyati grid yoki setkadagi elementning ma'lum bir ustungacha bo‘lgan yakuniy joylashuvini belgilaydi. Xususiyatning qiymati musbat yoki manfiy son bo‘lishi mumkin. Agar musbat son belgilasak, elementning yakuniy joylashuvi chapdan o‘ngga hisoblanadi. Manfiy son ko‘rsatilganda element teskari tartibda joylashadi, ya'ni o‘ngdan chapga.

grid-column-end xususiyatining muhim jihati shundaki, ko‘rsatilgan ustun raqami elementning yakuniy joylashuviga kirmaydi - agar biz 3 sonini belgilasak, element faqat birinchi va ikkinchi ustunlarni egallaydi.

Sintaksis

selector {
	grid-column-end: musbat yoki manfiy son;
}

Misol

Keling, griddagi elementlarga yakuniy joylashuvlarni belgilaymiz:

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

Misol

Endi esa grid-column-start xususiyati yordamida birinchi, ikkinchi va uchinchi elementlar birinchi qatorda joylashishini ta'minlaymiz. To‘rtinchi element esa butun ikkinchi qatorni egallasin:

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

Misol

Qo‘shni elementlar tomonidan band qilingan ustunlar ustma-ust tushganda, har bir keyingi element bir qator pastga suriladi. Keling, ushbu xususiyatdan foydalanib, birinchi element birinchi qatorda, ikkinchi - ikkinchida, uchinchi va to‘rtinchi esa - uchinchi qatorda joylashishini ta'minlaymiz:

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

Misol

Endi keling grid-column-end xususiyatida manfiy sonlarni ko‘rsatamiz:

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

Shuningdek qarang

grid-column-start xususiyati,
bu griddagi elementning ustunlar bo‘yicha boshlang‘ich joylashuvini belgilaydi
grid-column xususiyati,
bu griddagi elementning ustunlar bo‘yicha boshlang‘ich va yakuniy joylashuvlarini belgilaydi
grid-template-columns xususiyati,
bu griddagi ustunlar soni va kengligini belgilaydi
grid-auto-columns xususiyati,
bu noaniq griddagi ustunlar soni va kengligini belgilaydi