Omadus grid-column

Omadus grid-column määrab elemendi alg- ja lõppasendi gridis või võrgus veergude kaupa. Omaduse väärtusteks võivad olla positiivsed või negatiivsed arvud, mis on eraldatud kaldkriipsuga. Esimene number tähistab elemendi algasendit, teine - lõppasendit.

Kui määrame väärtuseks positiivse arvu, siis elemendi asend loetakse vasakult paremale. Negatiivse arvu määramisel element paikneb vastupidises järjekorras, st. paremalt vasakule.

Süntaks

valija {
	grid-column: alguspositsioon / lõpppositsioon;
}

Näide

Määrame gridis elementidele alg- ja lõppasendid:

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

Näide

Nüüd määrame omaduses grid-column negatiivsed arvud:

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

Näide

Nüüd teeme nii, et esimene, teine ja kolmas element paikneksid esimeses reas. Neljas element hõivaks kogu teise rea:

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

Näide

Kõrvuti asetsevate elementide veergude kattumisel nihkub iga järgnev element ühe rea võrra allapoole. Kasutame seda omadust, et panna esimene element esimesele reale, teine - teisele, ning kolmas ja neljas - kolmandale reale:

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

Näide

Kombineerime omadusi grid-column ja grid-row:

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

Näide

Nüüd teeme nii, et esimene ja viies plokk hõivaksid kogu rea, teine plokk - kaks rida ja kaks veergu, kolmas ja neljas plokk - üks rida ja kaks veergu:

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

Vaata ka

omadus grid-row,
mis määrab elemendi alg- ja lõppasendi gridis ridadel
omadus grid-column-start,
mis määrab elemendi algasendi gridis veergudes
omadus grid-column-end,
mis määrab elemendi lõppasendi gridis veergudes
omadus grid-template-columns,
mis määrab veergude arvu ja laiuse gridis
omadus grid-auto-columns,
mis määrab veergude arvu ja laiuse kaudses gridis