grid-column-start қасиеті

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

Синтаксис

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

Мысал

Grid ішіндегі элементтерге бастапқы орындар берейік:

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

Мысал

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

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

Мысал

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

<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 қасиеті,
ол элементтің grid ішіндегі баған бойынша соңғы орнын анықтайды
grid-column қасиеті,
ол элементтің grid ішіндегі баған бойынша бастапқы және соңғы орындарын анықтайды
grid-template-columns қасиеті,
ол grid ішіндегі бағандардың саны мен енін анықтайды
grid-auto-columns қасиеті,
ол жасырын grid ішіндегі бағандардың саны мен енін анықтайды