CSS Grid'de fr Birimi

Grid'deki satır ve sütun boyutları sadece px birimiyle değil, esneklik birimleri olan fr (fraksiyon) ile de ayarlanabilir. Bu birimlerin kullanılması, elemanları yerleştirmek için tüm alanın eşit paylara veya fraksiyonlara bölüneceği anlamına gelir. Her eleman bu bölünmenin belirli bir kısmını alabilir. Bunun nasıl yapıldığına bir göz atalım.

grid-template-columns özelliğini kullanarak grid'in birinci ve ikinci sütunlarının konteynerin bir kısmını, üçüncü sütunun ise üç kısmını kaplamasını sağlayalım:

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

Результат: