Khóa học đề xuất:

Chức năng minmax() trong CSS

Định nghĩa và cách sử dụng minmax() Chức năng của hàm minmax() trong CSS lưới và định nghĩa một khoảng cách lớn hơn hoặc bằng giá trị nhỏ nhất và nhỏ hơn hoặc bằng giá trị lớn nhất.

ví dụ

Sử dụng minmax() Định nghĩa khoảng cách giữa các cột lưới:

.grid-container {
  display: grid;
  grid-template-columns: minmax(min-content, 350px) minmax(150px, 1fr) 120px;
  grid-gap: 5px;
  height: 150px;
  background-color: green;
  padding: 10px;
}

Thử trực tiếp

Cú pháp CSS

minmax(min, max)
Giá trị Mô tả
min

Bắt buộc. Giá trị nhỏ nhất.

Có thể là độ dài, phần trăm, giá trị co giãn (fr) hoặc một trong các từ khóa sau:

  • auto
  • max-content
  • min-content
max

Bắt buộc. Giá trị lớn nhất.

Có thể là độ dài, phần trăm, giá trị co giãn (fr) hoặc một trong các từ khóa sau:

  • auto
  • max-content
  • min-content

Chi tiết kỹ thuật

Phiên bản: Module CSS Grid Layout Level 2

Hỗ trợ trình duyệt

Số liệu trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ hàm này.

Chrome Edge Firefox Safari Opera
59 16 52 10.1 44

Trang liên quan

Tham khảo:Hàm min() trong CSS

Tham khảo:Hàm max() trong CSS

Tham khảo:Thuộc tính CSS grid-template-columns

Tham khảo:Thuộc tính CSS grid-template-rows

Tham khảo:Thuộc tính grid-auto-columns trong CSS

Tham khảo:Thuộc tính grid-auto-rows trong CSS