Својство 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-у