Svojstvo grid-column-start

Svojstvo grid-column-start postavlja početnu poziciju elementa u grid-u ili mreži po kolonama. Vrednost svojstva može biti pozitivan ili negativan broj. Ako zadajemo pozitivan broj, onda se početna pozicija elementa računa s leva na desno. Pri navođenju negativnog broja element će se pozicionirati obrnutim redosledom, tj. s desna na levo.

Sintaksa

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

Primer

Hajde da zadamo elementima u grid-u početne pozicije:

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

Primer

A sada hajde u svojstvu grid-column-start da 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;
	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;
}

Primer

A sada uz pomoć svojstva grid-column-end uradimo tako da prvi, drugi i treći elementi se pozicioniraju u prvom redu. A četvrti element da 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

Pri preklapanju kolona koje zauzimaju susedni elementi, svaki sledeći element se pomera na red niže. Hajde da uzimajući u obzir ovu mogućnost uradimo tako da se prvi element pozicionira u prvom redu, drugi - u drugom, a treći i četvrti - da zauzmu treći 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: 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;
}

Vidite takođe

svojstvo grid-column-end,
koje postavlja krajnju poziciju elementa u grid-u po kolonama
svojstvo grid-column,
koje postavlja početnu i krajnju pozicije elementa u grid-u po kolonama
svojstvo grid-template-columns,
koje postavlja broj i širinu kolona u grid-u
svojstvo grid-auto-columns,
koje postavlja broj i širinu kolona u implicitnom grid-u