A grid-column-end tulajdonság

A grid-column-end tulajdonság megadja az elem végső pozícióját a gridben vagy rácsban egy adott oszlopig. A tulajdonság értéke lehet pozitív vagy negatív szám. Ha pozitív számot adunk meg, akkor az elem végső pozíciója balról jobbra számolódik. Negatív szám megadásakor az elem fordított sorrendben helyezkedik el, azaz jobbról balra.

A grid-column-end tulajdonság fontos árnyalata, hogy a megadott oszlop sorszáma nem tartozik bele az elem végső pozíciójába - ha a 3 számot adjuk meg, akkor az elem csak az első és második oszlopot foglalja el.

Szintaxis

szelektor {
	grid-column-end: pozitív vagy negatív szám;
}

Példa

Adjunk meg a gridben lévő elemeknek végpozíciókat:

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

Példa

Most pedig a grid-column-start tulajdonság segítségével elérjük, hogy az első, második és harmadik elem az első sorban helyezkedjenek el. A negyedik elem pedig a teljes második sort foglalja el:

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

Példa

Amikor a szomszédos elemek által elfoglalt oszlopok átfedésbe kerülnek, minden további elem egy sorral lejjebb kerül. Használjuk ki ezt a sajátosságot, és tegyük úgy, hogy az első elem az első sorban, a második - a másodikban, a harmadik és negyedik pedig a harmadik sorban helyezkedjenek el:

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

Példa

Most pedig a grid-column-end tulajdonságban adjunk meg negatív számokat:

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

Lásd még

a grid-column-start tulajdonság,
amely megadja az elem kezdő pozícióját a gridben az oszlopok mentén
a grid-column tulajdonság,
amely megadja az elem kezdő és végső pozícióját a gridben az oszlopok mentén
a grid-template-columns tulajdonság,
amely megadja az oszlopok számát és szélességét a gridben
a grid-auto-columns tulajdonság,
amely megadja az oszlopok számát és szélességét az implicit gridben