Die fr-eenheid in CSS-roosters

Die groottes van rye en kolomme in 'n rooster kan nie net in px gestel word nie, maar ook in die buigsaamhedeenhede fr (fraksie). Die gebruik van hierdie eenhede beteken dat alle ruimte vir die plasing van elemente in gelyke dele of fraksies verdeel sal word. Elke element sal 'n sekere deel van hierdie verdeling kan neem. Kom ons kyk hoe dit gedoen word.

Kom ons gebruik die eienskap grid-template-columns om te maak dat die eerste en tweede kolomme van die rooster een deel van die houer neem, en die derde kolom - drie dele:

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

Laat daar twee kolomme in jou rooster wees. Maak dit so dat hulle dieselfde breedte het.

Laat daar drie kolomme in jou rooster wees. Maak dit so dat hulle dieselfde breedte het.

Laat daar drie kolomme in jou rooster wees. Maak dit so dat die derde kolom twee keer so groot soos die eerste en tweede een is.