Единицата fr во CSS Grid

Димензиите на редовите и колоните во grid може да се постават не само во px, туку и во единици на флексибилност fr (фракција). Користењето на овие единици значи дека целиот простор за поставување на елементите ќе биде поделен на еднакви делници или фракции. Секој елемент ќе може да земе одреден дел од ова поделување. Ајде да погледнеме, како се прави ова.

Ајде со помош на својството grid-template-columns да направиме така што првата и втората колона од grid-от ќе заземат еден дел од контејнерот, а третата колона - три дела:

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

Результат: