หน่วย fr คืออะไร

Fraction ของพื้นที่เหลือ

fr แบ่ง พื้นที่ที่เหลือ ในกริดตามสัดส่วน หลังหักขนาดคงที่ (เช่น px) และ gap แล้ว

/* ไซด์บาร์คงที่ + เนื้อหายืด */
.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1rem;
}

/* สามคอลัมน์เท่ากัน */
.equal {
  grid-template-columns: 1fr 1fr 1fr;
  /* เท่ากับ: repeat(3, 1fr) */
}

ผสมหน่วย

200px 1fr 2fr = คอลัมน์แรก 200px ส่วนที่เหลือแบ่ง 1:2