CSSminmax(min, max) đặt cận dưới và cận trên cho một track của grid.
css
/* cột không bao giờ hẹp hơn 200px, tối đa chia đều phần còn lại */
.grid { grid-template-columns: minmax(200px, 1fr) 2fr; }
/* hàng cao tối thiểu 120px nhưng giãn được theo nội dung */
.grid { grid-auto-rows: minmax(120px, auto); }
/* lưới responsive không cần một dòng media query nào */
.cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }Dòng cuối là công thức được dùng nhiều nhất trong CSS Grid hiện đại: mỗi card tối thiểu 260px, số cột tự tính theo bề rộng, và card giãn ra cho vừa hàng.
Giá trị dùng được: độ dài, %, auto, min-content, max-content, và fr — nhưng fr chỉ được đặt ở vị trí max.
css
grid-template-columns: minmax(1fr, 300px); /* KHÔNG hợp lệ */
grid-template-columns: minmax(200px, 1fr); /* hợp lệ */Lưu ý: minmax(260px, 1fr) vẫn tràn khi container hẹp hơn 260px (điện thoại nhỏ, hoặc sidebar).
Cách chống:
css
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));min(260px, 100%) đảm bảo cận dưới không bao giờ vượt bề rộng container.