Tidadigi Logo

CSS | fit-content() Property

Thuộc tính CSS fit-content là một thuộc tính tích hợp sẵn trong CSS. Thuộc tính này được dùng để điều chỉnh kích thước theo công thức min(maximum size, max(minimum size, argument)). Thuộc tính fit-content() dùng để xác định hàm giới hạn kích thước tối đa của phần tử. Công thức này rất hữu ích khi làm việc với CSS grids. Tuy nhiên cần nhớ rằng fit-content() không tương thích với Internet Explorer trên PC. Các đơn vị CSS khác nhau có thể được sử dụng trong công thức này. Hàm fit-content() chấp nhận độ dài và phần trăm làm đối số.
Cú pháp:  

fit-content: length | percentage


Giá trị thuộc tính:  

  • length: Giá trị thuộc tính này chứa độ dài cố định.
    Đơn vị: Độ dài tuyệt đối
    • fit-content(8cm)
    • fit-content(12mm)
    • fit-content(8pc)
    • fit-content(15px)
    • fit-content(5pt)
  • percentage: Giá trị thuộc tính này chứa độ dài tương đối phụ thuộc vào không gian có sẵn theo trục đã cho.
    Đơn vị: Độ dài tương đối
    • fit-content(100%)
    • fit-content(10em)
    • fit-content(5rem)
    • fit-content(2ch)


Ví dụ dưới đây minh họa thuộc tính CSS fit-content:
Ví dụ: Có thể thấy trang web được chia thành bốn cột lưới. Chiều rộng tối đa cho phép của các phần tử thứ nhất, thứ hai và thứ ba lần lượt là 150px, 250px và 350px. Trong khi đó chiều rộng của phần tử thứ tư được đặt thành 1.5fr. Điều này nghĩa là nó sẽ tự điều chỉnh theo chiều rộng thiết bị và chiều rộng ba phần tử kia.

html 
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <title>CSS | fit-content Property</title>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1, 
                   shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
          integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
          crossorigin="anonymous">

</head>

<style>
    #container {
        display: grid;
        grid-template-columns: fit-content(150px) 
                               fit-content(250px) 
                               fit-content(350px) 1.5fr;
        grid-gap: 5px;
        box-sizing: border-box;
        height: 100%;
        width: 100%;
        background-color: #563d7c;
        padding: 8px;
    }
</style>

<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <div id="container">

        <div style="background-color: whitesmoke; 
                    padding: 5px">
          The smallest division of the grid. 
          Maximum width is clamped to 150px.
        </div>
        <div style="background-color: whitesmoke; 
                    padding: 5px">
          This division's width will depend on
          the content inside it. However, the
          maximum width will be 250px.
        </div>
        <div style="background-color: whitesmoke; 
                    padding: 5px">
            <strong>
              Division with some more data, however, 
              the maximum permissible width will be 350px.
            </strong>
            <br>
            <br> 
          Web design encompasses many different skills
          and disciplines in the production and maintenance 
          of websites. The different areas of web design 
          include web graphic design; interface design; 
          authoring, including standardized code and 
          proprietary software; user experience design;
          and search engine optimization.
        </div>
        <div style="background-color: whitesmoke; 
                    padding: 5px">
          Flexible division, the width will change in 
          accordance with the screen size and the width
          of the other three divisions.
        </div>
    </div>

</body>

</html>

Đầu ra:  


Giải thích: Hãy xem ví dụ từng bước.

  • Bước 01: Bố cục thông thường là bố cục trang web thông thường. CSS Grid được sử dụng cho mục đích trình diễn. CSS Grid giúp tạo các trang web đáp ứng vì các phần tử lưới điều chỉnh theo chiều rộng màn hình.

css-fit-content-property

  • Bước 02: Chiều rộng màn hình bắt đầu giảm. Phần tử thứ tư đã bắt đầu co lại nhưng phần tử thứ nhất, thứ hai và thứ ba vẫn không bị ảnh hưởng.

css-fit-content-property

  • Bước 03: Chiều rộng tối thiểu, phần tử thứ ba đã co lại nhiều nhất. Nội dung bên trong phần tử thứ nhất và thứ hai đã tự điều chỉnh để không bị tràn. Lưới phản hồi tốt với sự thay đổi chiều rộng màn hình.

css-fit-content-property

  • Bước 04: Chiều rộng màn hình bắt đầu tăng. Bây giờ chiều rộng màn hình đã tăng lên và chiều rộng của tất cả các phần tử cũng tăng theo. Tuy nhiên một giới hạn trên về chiều rộng của các phần tử thứ nhất, thứ hai và thứ ba đã được đặt. Do đó sau khi đạt đến giới hạn đó chúng sẽ được cố định. Phần tử thứ tư vẫn tiếp tục mở rộng.

css-fit-content-property

  • Bước 05: Trở lại bố cục bình thường, lưới đã được khôi phục về bố cục ban đầu.

css-fit-content-property


Từ các bước02, 03 và 04, có thể thấy rằng khi chiều rộng màn hình bắt đầu giảm, phần tử thứ tư là phần tử đầu tiên co lại. Khi chiều rộng bắt đầu tăng lên tất cả các phần tử bắt đầu mở rộng. Tuy nhiên phần tử thứ nhất ngừng mở rộng sau khi chiều rộng bằng 150px. Trong khi phần tử thứ hai và thứ ba mở rộng cho đến khi đạt chiều rộng 250px và 350px. Phần tử thứ tư tiếp tục mở rộng. Điều này là do chiều rộng của nó được đặt thành 1.5fr nghĩa là chiều rộng của nó sẽ phụ thuộc vào chiều rộng màn hình và các phần tử khác.

Trình duyệt được hỗ trợ:

  • Google Chrome
  • Firefox
  • Opera
  • Safari

Last Updated : 21/07/2025