Ominaisuus grid-column-end

Ominaisuus grid-column-end määrittää elementin loppusijainnin gridissä tai ruudukossa tiettyyn sarakkeeseen asti. Ominaisuuden arvona voi olla positiivinen tai negatiivinen luku. Jos annamme positiivisen luvun, elementin loppusijainti lasketaan vasemmalta oikealle. Kun määritetään negatiivinen luku, elementti sijoitetaan käänteisessä järjestyksessä, eli oikealta vasemmalle.

Tärkeä vivahde ominaisuudessa grid-column-end on, että määritetyn sarakkeen numeroa ei sisällytetä elementin loppusijaintiin - jos annamme luvun 3, elementti vie vain ensimmäisen ja toisen sarakkeen.

Syntaksi

valitsija {
	grid-column-end: positiivinen tai negatiivinen luku;
}

Esimerkki

Asetetaan elementeille gridissä loppusijainnit:

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

Esimerkki

Nyt tehdään ominaisuuden grid-column-start avulla 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-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;
}

Esimerkki

Kun vierekkäisten elementtien käyttämät sarakkeet menevät päällekkäin, jokainen seuraava elementti siirtyy yhden rivin alemmaksi. Hyödynnetään tätä piirrettä tekemällä niin, että ensimmäinen elementti sijoittuu ensimmäiselle riville, toinen - toiselle, ja kolmas sekä 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-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;
}

Esimerkki

Nyt määritetään ominaisuudessa grid-column-end negatiiviset luvut:

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

Katso myös

ominaisuus grid-column-start,
joka määrittää elementin alkusijainnin gridissä sarakkeiden suhteen
ominaisuus grid-column,
joka määrittää elementin alkusijainnin ja 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ä