Enota fr v CSS mrežah

Velikosti vrstic in stolpcev v mreži lahko določimo ne le v px, temveč tudi v enotah prožnosti fr (frakcija). Uporaba teh enot pomeni, da bo ves prostor za razporeditev elementov razdeljen na enake dele ali frakcije. Vsak element bo lahko vzel določen del tega razdelka. Poglejmo, kako se to naredi.

Z lastnostjo grid-template-columns naredimo tako, da prvi in drugi stolpec mreže zasedeta en del vsebnika, tretji stolpec pa tri 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;
}

Naj ima vaša mreža dva stolpca. Poskrbite, da bosta imela enako širino.

Naj ima vaša mreža tri stolpce. Poskrbite, da bodo imeli enako širino.

Naj ima vaša mreža tri stolpce. Poskrbite, da bo tretji stolpec dvakrat večji od prvega in drugega.