Az fr egység a CSS Gridben

A grid sorainak és oszlopainak mérete nem csak px-ben adható meg, hanem a fr (fraction) rugalmassági egységekben is. Ezen egységek használata azt jelenti, hogy az összes elérhető helyet az elemek elhelyezésére egyenlő részekre vagy frakciókra osztják fel. Minden elem képes lesz egy bizonyos részét felvenni ennek a felosztásnak. Nézzük meg, hogyan is működik ez.

Állítsuk be a grid-template-columns tulajdonsággal úgy, hogy a grid első és második oszlopa a konténer egy-egy részét foglalja el, míg a harmadik oszlop három részt:

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

Tegyük fel, hogy a gridjében két oszlop van. Állítsa be úgy, hogy azok egyenlő szélességűek legyenek.

Tegyük fel, hogy a gridjében három oszlop van. Állítsa be úgy, hogy azok egyenlő szélességűek legyenek.

Tegyük fel, hogy a gridjében három oszlop van. Állítsa be úgy, hogy a harmadik oszlop két timeszer legyen nagyobb, mint az első és a második.