Vlastnosť grid-column-end

Vlastnosť grid-column-end určuje koncovú pozíciu prvku v gride alebo mriežke pred určeným stĺpcom. Hodnotou vlastnosti môže byť kladné alebo záporné číslo. Ak zadáme kladné číslo, koncová pozícia prvku sa počíta zľava doprava. Pri zadaní záporného člena sa prvok umiestni v opačnom poradí, t.j. sprava doľava.

Dôležitý detail vlastnosti grid-column-end spočíva v tom, že číslo určeného stĺpca nie je zahrnuté do koncovej pozície prvku - ak zadáme číslo 3, prvok zaberie iba prvý a druhý stĺpec.

Syntax

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

Príklad

Nastavme prvkom v gride koncové pozície:

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

Príklad

A teraz pomocou vlastnosti grid-column-start urobme tak, aby prvý, druhý a tretí prvok boli umiestnené v prvom rade. A štvrtý prvok zaberal 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 prekrývaní stĺpcov, ktoré zaberajú susedné prvky, každý nasledujúci prvok sa posunie o rad nižšie. Využime túto vlastnosť a urobme tak, aby sa prvý prvok umiestnil v prvom rade, druhý - v druhom, a tretí a štvrtý - v treťom rade:

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

Príklad

A teraz zadajme vo vlastnosti grid-column-end 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;
	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;
}

Pozri tiež

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