A grid-column-start tulajdonság

A grid-column-start tulajdonság határozza meg egy elem kezdő pozícióját a gridben vagy rácsban az oszlopok mentén. A tulajdonság értéke lehet pozitív vagy negatív szám. Ha pozitív számot adunk meg, akkor az elem kezdő 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.

Szintaxis

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

Példa

Adjunk meg a grid elemeinek kezdő 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-start: 1;
}
#elem2 {
	grid-column-start: 2;
}
#elem3 {
	grid-column-start: 3;
}

Példa

Most pedig a grid-column-start 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-start: -1;
}
#elem2 {
	grid-column-start: -2;
}
#elem3 {
	grid-column-start: -3;
}

Példa

Most a grid-column-end 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 következő elem egy sorral lejjebb kerül. Ennek a lehetőségnek a figyelembevételével tegyük meg, hogy az első elem az első sorban, a második - a másodikban, a harmadik és negyedik pedig - a harmadik sort foglalják 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;
}

Lásd még

a grid-column-end tulajdonság,
amely megadja az elem végpozícióját a grid oszlopaiban
a grid-column tulajdonság,
amely megadja az elem kezdő és végpozícióját a grid oszlopaiban
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