Својството grid-column

Својството grid-column ја одредува почетната и крајната позиција на елементот во grid-от или мрежата по колони. Вредностите на својството можат да бидат позитивни или негативни броеви, наведени преку коса црта. Првиот број означува почетна позиција на елементот, вториот - крајна позиција.

Ако како вредност задаваме позитивен број, тогаш позицијата на елементот се брои од лево кон десно. При наведување на негативен број елементот ќе се позиционира во обратен редослед, т.е. од десно кон лево.

Синтакса

селектор {
	grid-column: почетна позиција / крајна позиција;
}

Пример

Ајде да ги зададеме на елементите во 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: 1 / 2;
}
#elem2 {
	grid-column: 1 / 3;
}
#elem3 {
	grid-column: 1 / 4;
}

Пример

А сега ајде во својството grid-column да наведеме негативни броеви:

<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: 1 / -2;
}
#elem2 {
	grid-column: 1 / -3;
}
#elem3 {
	grid-column: 1 / -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: 1 / 2;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 3 / 4;
}
#elem4 {
	grid-column: 1 / 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: 1 / 4;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 1 / 2;
}
#elem4 {
	grid-column: 3 / 4;
}

Пример

Да ги комбинираме својствата grid-column и grid-row:

<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;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 3;
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 1 / 2;
}
#elem4 {
	grid-row: 2 / 3;
	grid-column: 2 / 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 id="elem5">5</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 4;
}
#elem2 {
	grid-row: 2 / 4;
	grid-column: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}
#elem4 {
	grid-row: 3 / 3;
	grid-column: 2 / 4;
}
#elem5 {
	grid-row: 4 / 5;
	grid-column: 1 / 4;
}

Погледнете исто така

својството grid-row,
кое ја задава почетната и крајната позиција на елементот во grid-от по редови
својството grid-column-start,
кое ја задава почетната позиција на елементот во grid-от по колони
својството grid-column-end,
кое ја задава крајната позиција на елементот во grid-от по колони
својството grid-template-columns,
кое го одредува бројот и ширината на колоните во grid-от
својството grid-auto-columns,
кое го одредува бројот и ширината на колоните во имплицитниот grid