CSS гридларида fr бирлиги

Гриддаги қаторлар ва устуналар ўлчамларини фақат px да эмас, балки мунтазимлик бирликлари fr (фракция) да ҳам белгилаш мумкин. Ушбу бирликлардан фойдаланиш, элементларни жойлаштириш учун барча фазо бир хил улушларга ёки фракцияларга бўлинишини англатади. Ҳар бир элемент ушбу бўлишнинг маълум бир қисмини ола олади. Келинг, бу қандай амалга оширилишини кўрамиз.

Келинг, grid-template-columns хусусияти ёрдамида гриднинг биринчи ва иккинчи устуналари контейнернинг бир қисмини олсин, учинчи устуни эса уч қисмни олсин:

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

Результат: