Właściwość grid-column-end

Właściwość grid-column-end ustawia końcową pozycję elementu w gridzie lub siatce do określonej kolumny. Wartością właściwości może być liczba dodatnia lub ujemna. Jeśli podamy liczbę dodatnią, to końcowa pozycja elementu jest liczona od lewej do prawej. Przy podaniu liczby ujemnej element będzie rozmieszczony w odwrotnej kolejności, czyli od prawej do lewej.

Wažny niuans właściwości grid-column-end polega na tym, że numer określonej kolumny nie jest wliczany do końcowej pozycji elementu - jeśli podamy liczbę 3, to element zajmie tylko pierwszą i drugą kolumnę.

Składnia

selektor {
	grid-column-end: liczba dodatnia lub ujemna;
}

Przykład

Ustawmy elementom w gridzie końcowe pozycje:

<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;
}

Przykład

A teraz za pomocą właściwości grid-column-start sprawmy, aby pierwszy, drugi i trzeci element znajdowały się w pierwszym rzędzie. A czwarty element zajmował cały drugi rząd:

<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;
}

Przykład

Przy nakładaniu się kolumn, zajmowanych przez sąsiednie elementy, każdy kolejny element przesuwa się o rząd niżej. Wykorzystajmy tę cechę aby sprawić, żeby pierwszy element znajdował się w pierwszym rzędzie, drugi - w drugim, a trzeci i czwarty - w trzecim rzędzie:

<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;
}

Przykład

A teraz we właściwości grid-column-end podajmy liczby ujemne:

<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;
}

Zobacz też

właściwość grid-column-start,
która ustawia początkową pozycję elementu w gridzie wg kolumn
właściwość grid-column,
która ustawia początkową i końcową pozycję elementu w gridzie wg kolumn
właściwość grid-template-columns,
która ustawia liczbę i szerokość kolumn w gridzie
właściwość grid-auto-columns,
która ustawia liczbę i szerokość kolumn w niejawnym gridzie