Tidadigi Logo

CSS column-count Property

Thuộc tính column-count trong CSS được dùng để chia nội dung thành nhiều cột. Số cột này sẽ nằm trong một phần tử HTML bất kỳ.

Giá trị mặc định: auto

Cú pháp:  

column-count: number|auto|initial|inherit;

Giá trị thuộc tính:  

  • number: Giá trị này chỉ định số lượng cột bạn muốn tạo ra.
  • auto: Đây là giá trị mặc định của thuộc tính. Số lượng cột sẽ do các thuộc tính khác quyết định.
  • initial: Giá trị này dùng để đặt thuộc tính về giá trị mặc định ban đầu.
  • inherit: Thuộc tính này sẽ kế thừa từ phần tử cha của nó.

Ví dụ 1: Ví dụ này minh họa cách sử dụng thuộc tính column-count.

html 
<!-- HTML program to illustrate the 
    column-count property -->
<!DOCTYPE html>
<html>
  
<head>
    <title>column count property</title>
    <style>
        .gfg {
            -webkit-column-count: 2;
            -moz-column-count: 2;
            column-count: 2;
            /* divides text in 2 columns */
        }

        h1 {
            color: green;
        }

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

<body>
    <h1>
        GeeksforGeeks
    </h1>

    <h2>
        Example of column-count Property
    </h2>

    <!-- Text inside below div will be 
                divided into 2 columns -->
    <div class="gfg">
        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>

Kết quả:  

css-column-count-property

Ví dụ 2:  

html 
<!-- HTML program for column-count property of CSS -->
<!DOCTYPE html>
<html>
  
<head>
    <title>column count property</title>
    <style>
        .gfg {
            -webkit-column-count: 2;
            -moz-column-count: 2;
            column-count: 2;
            -webkit-column-rule: 10px double green;
            -moz-column-rule: 10px double green;
            column-rule: 10px double green;
            text-align: justify;
        }

        h1 {
            color: green;
        }

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

<body>
    <h1>
        GeeksforGeeks
    </h1>

    <h2>
        Example column-count Property
    </h2>

    <!-- The text inside below div will be divided into 
            2 columns -->
    <div class="gfg">
        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>

Kết quả:  

css-column-count-property

Trình duyệt được hỗ trợ: Các trình duyệt hỗ trợ thuộc tính column-count đượ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
  • Safari 9.0 trở lên
  • Opera 11.1 trở lên

Last Updated : 21/07/2025