Јединица 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;
}

Нека у вашем гриду буду две колоне. Урадите тако да оне имају једнаку ширину.

Нека у вашем гриду буду три колоне. Урадите тако да оне имају једнаку ширину.

Нека у вашем гриду буду три колоне. Урадите тако да трећа колона буде два пута већа од прве и друге.