Адзінка fr у CSS grыдах

Памеры радоў і слупкоў у grыдзе можна задаваць не толькі ў px, але і ў адзінках гібкасці fr (фракцыя). Выкарыстанне гэтых адзінак азначае, што ўся прастора для размяшчэння элементаў будзе разбіта на аднолькавыя долі альбо фракцыі. Кожны элемент зможа ўзяць пэўную частку гэтага раздзялення. Давайце паглядзім, як гэта робіцца.

Давайце з дапамогай уласцівасці grid-template-columns зробім так, каб першы і другі слупкі grыда занялі адну частку кантэйнера, а трэці слупок - тры часткі:

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

Хай у вашым grыдзе два слупкі. Зрабіце так, каб яны мелі аднолькавую шырыню.

Хай у вашым grыдзе тры слупкі. Зрабіце так, каб яны мелі аднолькавую шырыню.

Хай у вашым grыдзе тры слупкі. Зрабіце так, каб трэці слупок быў у два разы больш першага і другога.