Tidadigi Logo

CSS column-fill Property

Thuộc tính column-fill trong CSS xác định cách các cột được lấp đầy. Cột sẽ được lấp đầy một cách cân bằng hay không.

Syntax:  

column-fill: auto|balance|balance-all|initial|inherit;

Default Value: balance

Property Values:  

  • balance: Đây là giá trị mặc định của thuộc tính này. Giá trị này lấp đầy mỗi cột với cùng một lượng nội dung. Các cột sẽ không cao hơn chiều cao được chỉ định.
  • auto: Giá trị này lấp đầy mỗi cột cho đến khi đạt đến chiều cao đã chỉ định.
  • balance-all: Giá trị này chia đều nội dung giữa các cột. Trong các ngữ cảnh phân mảnh, tất cả các phân đoạn đều được cân bằng.
  • initial: Giá trị này được sử dụng để đặt thuộc tính column-fill về giá trị mặc định.
  • inherit: Giá trị này được dùng để kế thừa thuộc tính column-fill từ phần tử cha.

Example: Ví dụ minh họa giá trị auto và giá trị balance cho thuộc tính column-fill.  

html 
<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>The column-fill Property</title>
    <style>
        div {
            -webkit-column-count: 3;
            -moz-column-count: 3;
            column-count: 3;
            height: 100px;
        }

        .gfg1 {
            -moz-column-fill: auto;
            column-fill: auto;
        }

        .gfg2 {
            -moz-column-fill: balance;
            column-fill: balance;
        }

        h1 {
            color: green;
        }

        h1,
        h2 {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>
        GeeksforGeeks
    </h1>
    <h2>
        The column-fill Property
    </h2>

    <h2>column-fill: auto:</h2>
    <div class="gfg1">
        The course is designed for students
        as well as working professionals to
        prepare for coding interviews. This
        course is going to have coding questions
        from school level to the level needed for
        product based companies like Amazon,
        Microsoft, Adobe, etc.
    </div>

    <h2>column-fill: balance (default):</h2>
    <div class="gfg2">
        The course is designed for students
        as well as working professionals to
        prepare for coding interviews. This
        course is going to have coding questions
        from school level to the level needed for
        product based companies like Amazon,
        Microsoft, Adobe, etc
    </div>
</body>
  
</html>

Output:  

css-column-fill-property

Supported Browsers: Các trình duyệt được hỗ trợ bởi CSS | column-fill Property được liệt kê dưới đây:  

  • Google Chrome 50.0 trở lên
  • Edge 12.0 trở lên
  • Firefox 52.0 trở lên
  • Opera 37.0 trở lên
  • Safari 9.0 trở lên

Last Updated : 21/07/2025