Свойство grid-column

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

Ако като стойност зададем положително число, то позицията на елемента се отброява отляво надясно. При посочване на отрицателно число елементът ще се разполага в обратен ред, т.е. отдясно наляво.

Синтаксис

селектор {
	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;
}

Пример

А сега нека в свойството 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-column-start,
което задава началната позиция на елемент в грид по колони
свойство grid-column-end,
което задава крайната позиция на елемент в грид по колони
свойство grid-template-columns,
което задава броя и ширината на колоните в грид
свойство grid-auto-columns,
което задава броя и ширината на колоните в неявен грид