Lastnost grid-column-end

Lastnost grid-column-end določa končni položaj elementa v mreži do določenega stolpca. Vrednost lastnosti je lahko pozitivno ali negativno število. Če nastavimo pozitivno število, se končni položaj elementa šteje od leve proti desni. Če navedemo negativno število, se bo element postavil v obratnem vrstnem redu, tj. od desne proti levi.

Pomemben odtenek lastnosti grid-column-end je, da številka navedenega stolpca ni vključena v končni položaj elementa - če nastavimo število 3, bo element zasedel le prvi in drugi stolpec.

Sintaksa

selektor {
	grid-column-end: pozitivno ali negativno število;
}

Primer

Nastavimo elementom v mreži končne položaje:

<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

Zdaj pa z uporabo lastnosti grid-column-start poskrbimo, da se bodo prvi, drugi in tretji element nahajali v prvi vrstici. Četrti element pa naj zasede celotno drugo vrstico:

<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 prekrivanju stolpcev, ki jih zasedajo sosednji elementi, se vsak naslednji element premakne v nižjo vrstico. Izkoristimo to lastnost in poskrbimo, da se bo prvi element nahajal v prvi vrstici, drugi - v drugi, tretji in četrti pa v tretji vrstici:

<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

Zdaj pa v lastnosti grid-column-end navedimo negativna števila:

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

Glejte tudi

lastnost grid-column-start,
ki določa začetni položaj elementa v mreži po stolpcih
lastnost grid-column,
ki določa začetni in končni položaj elementa v mreži po stolpcih
lastnost grid-template-columns,
ki določa število in širino stolpcev v mreži
lastnost grid-auto-columns,
ki določa število in širino stolpcev v implicitni mreži