Единица fr в CSS гридове

Размерите на редове и колони в грида могат да бъдат задавани не само в px, но и в единици за гъвкавост fr (фракция). Използването на тези единици означава, че цялото пространство за разполагане на елементи ще бъде разделено на еднакви части или фракции. Всеки елемент ще може да вземе определена част от това разделяне. Нека да видим как се прави това.

Нека с помощта на свойството grid-template-columns направим така, че първата и втората колона на грида да заемат една част от контейнера, а третата колона - три части:

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

Нека във вашия грид има две колони. Направете така, че те да имат еднаква ширина.

Нека във вашия грид има три колони. Направете така, че те да имат еднаква ширина.

Нека във вашия грид има три колони. Направете така, че третата колона да бъде два пъти по-голяма от първата и втората.