Ominaisuus justify-items

Ominaisuus justify-items asettaa elementtien tasauksen grid-solujen sisällä vaaka-akselilla. Tasaus on kaikkein selkeimmin havaittavissa katsomalla gridiä selaimen debuggaus-työkalussa. Käytetään vanhempana olevaan elementtiin.

Syntaksi

valitsija {
	justify-items: flex-start | flex-end | center ;
}

Arvot

Arvo	Kuvaus
`flex-start`	Elementit on painettu vaaka-akselin alkuun.
`flex-end`	Lohkot on painettu vaaka-akselin loppuun.
`center`	Lohkot sijaitsevat vaaka-akselin keskellä.

Esimerkki . Tasaus vaaka-akselin alkuun

Tasataanpa elementtimme solujen sisällä vaaka-akselin alkuun:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Katsotaanpa nyt gridiämme debuggaajassa:

Esimerkki . Tasaus vaaka-akselin keskelle

Tasataanpa elementtimme soluissa vaaka-akselin keskelle:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Kytkemällä selaimen debuggaus-työkalun päälle näemme gridimme:

Esimerkki . Tasaus vaaka-akselin loppuun

Tasataanpa elementtimme vaaka-akselin loppuun:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Katsotaanpa nyt gridiä debuggaus-työkalun kautta:

Katso myös

ominaisuus align-items,
joka asettaa tasauksen poikittaisakselilla
ominaisuus place-items,
joka asettaa elementtien tasauksen grid-solujen sisällä