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

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

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

html<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>

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

Результат: