Ominaisuus grid-column

Ominaisuus grid-column määrittää elementin alku- ja loppusijainnin gridissä tai verkossa sarakkeiden suhteen. Ominaisuuden arvoiksi voi olla positiivisia tai negatiivisia numeroita, erotettuna vinoviivalla. Ensimmäinen numero ilmaisee elementin alkusijainnin, toinen - loppusijainnin.

Jos arvoksi annetaan positiivinen numero, elementin sijainti lasketaan vasemmalta oikealle. Kun annetaan negatiivinen numero, elementti sijoitetaan käänteisessä järjestyksessä, ts. oikealta vasemmalle.

Syntaksi

valitsija {
	grid-column: alkusijainti / loppusijainti;
}

Esimerkki

Annetaan elementeille gridissä alku- ja loppusijainnit:

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

Esimerkki

Annetaan nyt ominaisuudelle grid-column negatiivisia numeroita:

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

Esimerkki

Tehdään nyt niin, että ensimmäinen, toinen ja kolmas elementti sijoitetaan ensimmäiselle riville. Ja neljäs elementti vie koko toisen rivin:

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

Esimerkki

Kun vierekkäisten elementtien käyttämät sarakkeet menevät päällekkäin, jokainen seuraava elementti siirtyy alemmalle riville. Hyödynnetään tätä piirrettä tekemällä niin, että ensimmäinen elementti sijoitetaan ensimmäiselle riville, toinen - toiselle, ja kolmas ja neljäs - kolmannelle riville:

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

Esimerkki

Yhdistetään ominaisuudet 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;
}

Esimerkki

Tehdään nyt niin, että ensimmäinen ja viides lohko vievät koko rivin, toinen lohko - kaksi riviä ja kahta saraketta, ja kolmas ja neljäs lohko - yhden rivin ja kaksi saraketta:

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

Katso myös

ominaisuus grid-row,
joka määrittää elementin alku- ja loppusijainnin gridissä rivien suhteen
ominaisuus grid-column-start,
joka määrittää elementin alkusijainnin gridissä sarakkeiden suhteen
ominaisuus grid-column-end,
joka määrittää elementin loppusijainnin gridissä sarakkeiden suhteen
ominaisuus grid-template-columns,
joka määrittää sarakkeiden lukumäärän ja leveyden gridissä
ominaisuus grid-auto-columns,
joka määrittää sarakkeiden lukumäärän ja leveyden implisiittisessä gridissä