Svojstvo grid-column-end

Svojstvo grid-column-end zadaje krajnju poziciju elementa u gridu ili mreži do određene kolone. Vrednost svojstva može biti pozitivan ili negativan broj. Ako zadajemo pozitivan broj, tada se krajnja pozicija elementa računa sleva na desno. Prilikom navođenja negativnog broja element će se pozicionirati obrnutim redosledom, tj. s desna na levo.

Važan detalj svojstva grid-column-end sastoji se u tome da broj navedene kolone nije uključen u krajnju poziciju elementa - ako zadamo broj 3, tada će element zauzeti samo prvu i drugu kolonu.

Sintaksa

selektor {
	grid-column-end: pozitivan ili negativan broj;
}

Primer

Hajde da zadamo elementima u gridu krajnje pozicije:

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

Primer

A sada pomoću svojstva grid-column-start učinimo da se prvi, drugi i treći element pozicioniraju u prvom redu. A četvrti element neka zauzme ceo drugi red:

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

Primer

Prilikom preklapanja kolona koje zauzimaju susedni elementi, svaki sledeći element se pomera jedan red niže. Hajde da pomoću ove karakteristike učinimo da se prvi element pozicionira u prvom redu, drugi - u drugom, a treći i četvrti - u trećem redu:

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

Primer

A sada hajde da u svojstvu grid-column-end navedemo negativne brojeve:

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

Pogledajte takođe

svojstvo grid-column-start,
koje zadaje početnu poziciju elementa u gridu po kolonama
svojstvo grid-column,
koje zadaje početnu i krajnju poziciju elementa u gridu po kolonama
svojstvo grid-template-columns,
koje zadaje broj i širinu kolona u gridu
svojstvo grid-auto-columns,
koje zadaje broj i širinu kolona u implicitnom gridu