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

Пусть в вашем гриде два столбца. Сделайте так, чтобы они имели одинаковую ширину.

Пусть в вашем гриде три столбца. Сделайте так, чтобы они имели одинаковую ширину.

Пусть в вашем гриде три столбца. Сделайте так, чтобы третий столбец был в два раза больше первого и второго.