grid-column-start xususiyati

grid-column-start xususiyati grid yoki setkadagi elementning ustunlar bo‘yicha boshlang‘ich joylashuvini belgilaydi. Xususiyatning qiymati ijobiy yoki salbiy son bo‘lishi mumkin. Agar ijobiy son belgilasak, elementning boshlang‘ich joylashuvi chapdan o‘ngga hisoblanadi. Salbiy son ko‘rsatilganda element teskari tartibda joylashadi, ya'ni o‘ngdan chapga.

Sintaksis

selektor {
	grid-column-start: ijobiy yoki salbiy son;
}

Misol

Keling, griddagi elementlarga boshlang‘ich joylashuvlarni belgilaymiz:

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

Misol

Endi grid-column-start xususiyatida salbiy 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;
	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;
}

Misol

Endi grid-column-end 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 egallagan ustunlarning ustma-ust tushishi paytida, har bir keyingi element pastroq qatorda siljiydi. Keling, bu imkoniyatni hisobga olgan holda, birinchi element birinchi qatorda, ikkinchi - ikkinchida, uchinchi va to‘rtinchi esa uchinchi qatorda joylashsin:

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

Shuningdek qarang

grid-column-end xususiyati,
bu griddagi elementning ustunlar bo‘yicha yakuniy 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