Enheten fr i CSS-grid

Storleken på rader och kolumner i ett grid kan sättas inte bara i px, utan även i flexibilitetsenheter fr (fraktion). Användning av dessa enheter betyder att allt utrymme för placering av element kommer att delas upp i lika delar eller fraktioner. Varje element kommer att kunna ta en specifik del av denna uppdelning. Låt oss titta på hur detta görs.

Låt oss med egenskapen grid-template-columns göra så att den första och andra kolumnen i gridet tar en del av containern, och den tredje kolumnen - tre delar:

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

Antag att ditt grid har två kolumner. Gör så att de har samma bredd.

Antag att ditt grid har tre kolumner. Gör så att de har samma bredd.

Antag att ditt grid har tre kolumner. Gör så att den tredje kolumnen är dubbelt så stor som den första och den andra.