Свойство grid-column-start

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

Синтаксис

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