Fr ühik CSS grid'ides

Grid'i ridade ja veergude suurusi saab määrata mitte ainult px-des, vaid ka paindlikkuse ühikutes fr (fraction). Nende ühikute kasutamine tähendab, et kogu elementide paigutamiseks mõeldud ruum jagatakse võrdseteks osadeks ehk fraktsioonideks. Iga element saab võtta kindla osa sellest jaotusest. Vaatame, kuidas seda tehakse.

Teeme omaduse grid-template-columns abil nii, et grid'i esimene ja teine veerg hõivaksid konteineri ühe osa, ja kolmas veerg - kolm osa:

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

Olgu teie grid'is kaks veergu. Tehke nii, et neil oleks sama laius.

Olgu teie grid'is kolm veergu. Tehke nii, et neil oleks sama laius.

Olgu teie grid'is kolm veergu. Tehke nii, et kolmas veerg oleks kaks korda suurem kui esimene ja teine.