Ominaisuus grid-column-start

Ominaisuus grid-column-start määrittää elementin aloitussijainnin gridissä tai verkossa sarakkeiden suhteen. Ominaisuuden arvona voi olla positiivinen tai negatiivinen luku. Jos annamme positiivisen luvun, elementin aloitussijainti lasketaan vasemmalta oikealle. Kun määritetään negatiivinen luku, elementti sijoitetaan käänteisessä järjestyksessä, ts. oikealta vasemmalle.

Syntaksi

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

Esimerkki

Asetetaan elementeille gridissä aloitussijainnit:

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

Esimerkki

Ja nyt laitetaan ominaisuuteen grid-column-start negatiivisia lukuja:

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

Esimerkki

Ja nyt avulla ominaisuus grid-column-end teemme niin, että ensimmäinen, toinen ja kolmas elementti sijaitsevat ensimmäisellä rivillä. 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 alemmas. Ottaen tämän mahdollisuuden huomioon tehdään niin, että ensimmäinen elementti sijoitetaan ensimmäiselle riville, toinen - toiselle, ja kolmas sekä neljäs - vievät kolmannen 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: 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;
}

Katso myös

ominaisuus grid-column-end,
joka määrittää elementin loppusijainnin gridissä sarakkeiden suhteen
ominaisuus grid-column,
joka määrittää elementin aloitus- ja loppusijainnit 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ä