fr unit là gì?

fr (fraction) chia phần không gian còn lại của grid container sau khi đã trừ mọi kích thước cố định và gap.

css

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  gap: 16px;
}
/* container 1000px:
   1000 - 200 (cột cố định) - 32 (2 gap) = 768px còn lại
   1fr = 256px, 2fr = 512px */

Vì sao hơn %:

css

.a { grid-template-columns: 33.33% 33.33% 33.33%; gap: 16px; }  /* TRÀN: % không trừ gap */
.b { grid-template-columns: repeat(3, 1fr); gap: 16px; }        /* vừa khít */

Kết hợp với minmax() để không co quá nhỏ:

css

.cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

Lưu ý: 1fr thực chất là minmax(auto, 1fr), nghĩa là không co nhỏ hơn nội dung.

Một cột chứa chuỗi dài hoặc <pre> sẽ phá vỡ tỉ lệ dù bạn đặt 1fr 1fr.
Cách sửa:

css

.grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

Đây là bug grid hay gặp nhất khi trong ô có bảng hoặc code block.

Xem toàn bộ CSS cùng filter theo level & chủ đề con.

Mở danh sách CSS

fr (fraction) chia phần không gian còn lại của grid container sau khi đã trừ mọi kích thước cố định và gap.

css

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  gap: 16px;
}
/* container 1000px:
   1000 - 200 (cột cố định) - 32 (2 gap) = 768px còn lại
   1fr = 256px, 2fr = 512px */

Vì sao hơn %:

css

.a { grid-template-columns: 33.33% 33.33% 33.33%; gap: 16px; }  /* TRÀN: % không trừ gap */
.b { grid-template-columns: repeat(3, 1fr); gap: 16px; }        /* vừa khít */

Kết hợp với minmax() để không co quá nhỏ:

css

.cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

Lưu ý: 1fr thực chất là minmax(auto, 1fr), nghĩa là không co nhỏ hơn nội dung.

Một cột chứa chuỗi dài hoặc <pre> sẽ phá vỡ tỉ lệ dù bạn đặt 1fr 1fr.
Cách sửa:

css

.grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

Đây là bug grid hay gặp nhất khi trong ô có bảng hoặc code block.