Уласцівасць grid-column-end

Уласцівасць grid-column-end задае канчатковую пазіцыю элемента ў грідзе або сетцы да пэўнага слупка. Значэннем уласцівасці можа быць дадатны або адмоўны лік. Калі задаем дадатны лік, то канчатковая пазіцыя элемента адлічваецца злева направа. Пры паказванні адмоўнага ліка элемент будзе размяшчацца ў адваротным парадку, г.зн. справа налева.

Важны нюанс уласцівасці grid-column-end складаецца ў тым, што нумар паказанага слупка не ўключаецца ў канчатковую пазіцыю элемента - калі мы зададзім лік 3, то элемент займе толькі першы і другі слупкі.

Сінтаксіс

селектар {
	grid-column-end: дадатны або адмоўны лік;
}

Прыклад

Давайце зададзім элементам у грідзе канчатковыя пазіцыі:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	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: 1;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: 4;
}

Прыклад

А цяпер з дапамогай уласцівасці grid-column-start зробім так, каб першы, другі і трэці элементы размяшчаліся ў першым шэрагу. А чацвёрты элемент займаў увесь другі шэраг:

<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 пакажам адмоўныя лікі:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	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: 1;
	grid-column-end: -3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: -2;
}

Глядзіце таксама

уласцівасць grid-column-start,
якое задае пачатковую пазіцыю элемента ў грідзе па слупках
уласцівасць grid-column,
якое задае пачатковую і канчатковую пазіцыі элемента ў грідзе па слупках
уласцівасць grid-template-columns,
якое задае колькасць і шырыню слупкоў у грідзе
уласцівасць grid-auto-columns,
якое задае колькасць і шырыню слупкоў у няяўным грідзе