Fr-yksikkö CSS Gridissä

Gridin rivien ja sarakkeiden kokoja voidaan määrittää ei vain px-yksiköissä, vaan myös joustavuusyksiköissä fr (fraktio). Näiden yksiköiden käyttö tarkoittaa, että kaikki elementtien sijoittamiseen tarkoitettu tila jaetaan yhtä suuriin osiin tai fraktioihin. Jokainen elementti voi ottaa tietyn osan tästä jaosta. Katsotaanpa, kuinka se tehdään.

Tehdään grid-template-columns- ominaisuuden avulla niin, että gridin ensimmäinen ja toinen sarake vievät yhden osan säiliöstä, ja kolmas sarake - kolme osaa:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Olkoon gridissäsi kaksi saraketta. Tee niin, että niillä on sama leveys.

Olkoon gridissäsi kolme saraketta. Tee niin, että niillä on sama leveys.

Olkoon gridissäsi kolme saraketta. Tee niin, että kolmas sarake on kaksi kertaa suurempi kuin ensimmäinen ja toinen.