A grid-column tulajdonság

A grid-column tulajdonság megadja egy elem kezdeti és végső pozícióját a gridben vagy rácsban az oszlopok mentén. A tulajdonság értékei lehetnek pozitív vagy negatív számok, perjellel elválasztva. Az első szám az elem kezdeti pozícióját, a második - a végső pozíciót jelöli.

Ha pozitív számot adunk meg értékként, akkor az elem pozíciója balról jobbra számolódik. Negatív szám megadása esetén az elem fordított sorrendben helyezkedik el, azaz jobbról balra.

Szintaxis

szelektor {
	grid-column: kezdeti pozíció / végső pozíció;
}

Példa

Adjunk meg a grid elemeinek kezdeti és végső pozíciókat:

<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: 1 / 2;
}
#elem2 {
	grid-column: 1 / 3;
}
#elem3 {
	grid-column: 1 / 4;
}

Példa

Most pedig a grid-column tulajdonságnál 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;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / -2;
}
#elem2 {
	grid-column: 1 / -3;
}
#elem3 {
	grid-column: 1 / -4;
}

Példa

Most pedig úgy alakítjuk, hogy az első, második és harmadik elem az első sorban helyezkedjenek el. A negyedik elem pedig az egész 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: 1 / 2;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 3 / 4;
}
#elem4 {
	grid-column: 1 / 4;
}

Példa

Amikor a szomszédos elemek által elfoglalt oszlopok átfedik egymást, 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: 1 / 4;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 1 / 2;
}
#elem4 {
	grid-column: 3 / 4;
}

Példa

Kombináljuk a grid-column és a grid-row tulajdonságokat:

<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;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 3;
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 1 / 2;
}
#elem4 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}

Példa

Most pedig tegyük úgy, hogy az első és az ötödik blokk az egész sort elfoglalja, a második blokk - két sort és két oszlopot, a harmadik és negyedik blokkok pedig - egy sort és két oszlopot:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
	<div id="elem5">5</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 4;
}
#elem2 {
	grid-row: 2 / 4;
	grid-column: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}
#elem4 {
	grid-row: 3 / 3;
	grid-column: 2 / 4;
}
#elem5 {
	grid-row: 4 / 5;
	grid-column: 1 / 4;
}

Lásd még

a grid-row tulajdonság,
amely megadja egy elem kezdeti és végső pozícióját a gridben a sorok mentén
a grid-column-start tulajdonság,
amely megadja egy elem kezdeti pozícióját a gridben az oszlopok mentén
a grid-column-end tulajdonság,
amely megadja egy elem 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