Hàm fit-content() của CSS

Định nghĩa và cách sử dụng

CSS fit-content() Hàm cho phép điều chỉnh kích thước của phần tử dựa trên nội dung. Cách này tương tự như phần tử sẽ sử dụng không gian khả dụng, nhưng sẽ không vượt quá kích thước nội dung lớn nhất.

ví dụ

Sử dụng fit-content() Chỉnh sửa kích thước cột trong lưới:

#container {
  display: grid;
  grid-template-columns: fit-content(250px) fit-content(250px) auto;
  grid-gap: 7px;
  box-sizing: border-box;
  height: 150px;
  width: 100%;
  background-color: green;
  padding: 7px;
}

Thử ngay

Cú pháp CSS

fit-content(length|percentage)
Giá trị Mô tả
length Định nghĩa giá trị độ dài tuyệt đối của kích thước.
percentage Định nghĩa kích thước phần trăm so với không gian khả dụng.

Chi tiết kỹ thuật

Phiên bản: CSS4

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ợ hàm này hoàn toàn.

Chrome Edge Firefox Safari Opera
57 16 52 10.1 44

Trang liên quan

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

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

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

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