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