Воҳиди 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;
}

Результат: