หน่วย 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