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

Результат: