Vlastnosť grid-column-start

Vlastnosť grid-column-start nastavuje počiatočnú pozíciu prvku v gride alebo sieti podľa stĺpcov. Hodnotou vlastnosti môže byť kladné alebo záporné číslo. Ak zadáme kladné číslo, počiatočná pozícia prvku sa počíta zľava doprava. Pri zadaní záporného člena sa prvok bude umiestňovať v opačnom poradí, t.j. sprava doľava.

Syntax

selektor {
	grid-column-start: kladné alebo záporné číslo;
}

Príklad

Nastavme prvkom v gride počiatočné pozície:

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

Príklad

A teraz vo vlastnosti grid-column-start zadajme záporné čísla:

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

Príklad

A teraz pomocou vlastnosti grid-column-end urobme tak, aby prvý, druhý a tretí prvok boli umiestnené v prvom rade. A štvrtý prvok zaberá celý druhý rad:

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

Príklad

Pri prekrytí stĺpcov, ktoré zaberajú susedné prvky, každý nasledujúci prvok sa posunie o rad nižšie. Využime túto možnosť a urobme tak, aby sa prvý prvok umiestnil v prvom rade, druhý - v druhom, a tretí a štvrtý - zaberali tretí rad:

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

Pozri tiež

vlastnosť grid-column-end,
ktorá nastavuje konečnú pozíciu prvku v gride podľa stĺpcov
vlastnosť grid-column,
ktorá nastavuje počiatočnú a konečnú pozíciu prvku v gride podľa stĺpcov
vlastnosť grid-template-columns,
ktorá nastavuje počet a šírku stĺpcov v gride
vlastnosť grid-auto-columns,
ktorá nastavuje počet a šírku stĺpcov v implicitnom gride