Tidadigi Logo

CSS Multiple Columns

CSS Multiple Columns là một thuộc tính được sử dụng để chia nội dung thành nhiều cột. Nó tương tự bố cục báo chí. Nó cải thiện khả năng đọc và tổ chức nội dung hiệu quả trên các kích thước màn hình khác nhau.

Key Properties of CSS Multiple Columns

Dưới đây là danh sách các thuộc tính CSS thiết yếu để làm việc với nhiều cột:

The column-count property

Thuộc tính column-count trong CSS xác định số cột mà nội dung của một phần tử được chia thành.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .content {
            column-count: 3; 
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="content">
        This text is divided into three columns using the column-count property. 
        It helps in creating newspaper-style layouts and enhances readability 
        for large chunks of text by splitting them into multiple columns.
    </div>
</body>
</html>

<!--Driver Code Ends-->


In this Example:

  • column-count: 3;: Chỉ định rằng nội dung bên trong phần tử được chia thành ba cột.
  • Được sử dụng để tạo bố cục tương tự như báo hoặc tạp chí.

The columns-gap property

Thuộc tính column-gap property in CSS được sử dụng để chỉ định khoảng cách giữa các cột. Nó được dùng trong bố cục nhiều cột.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .content {
            column-count: 3; 
            column-gap: 30px; 
            text-align: justify;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <h1 style="text-align: center; color: green;">GeeksforGeeks</h1>
    <div class="content">
        GeeksforGeeks is a computer science portal for geeks. It provides various tutorials, articles, 
        and courses to prepare for interviews at top companies like Microsoft, Amazon, and Google. 
    </div>
</body>
</html>

<!--Driver Code Ends-->


In this Example:

  • column-count: 3;: Chia nội dung thành ba cột.
  • column-gap: 30px;: Đặt khoảng cách 30px giữa các cột để cải thiện khả năng đọc.

The column-rule-style property

Thuộc tính column-rule-style trong CSS chỉ định kiểu của đường kẻ giữa các cột. Nó được dùng trong bố cục nhiều cột.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .content {
            column-count: 3; 
            column-rule-style: solid;
            text-align: justify;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="content">
        GeeksforGeeks is a computer science portal for geeks. It provides tutorials, articles, 
      and courses to prepare for interviews at top companies like Microsoft, Amazon, and Google. 
    </div>
</body>
</html>

<!--Driver Code Ends-->


In this Example:

  • column-count: 3;: Chia nội dung thành ba cột.
  • column-rule-style: solid;: Thêm một đường liền nét giữa các cột.
  • text-align: justify;: Căn đều văn bản trong mỗi cột để có giao diện sạch hơn.

The column-rule-width property

Thuộc tính column-rule-width trong CSS chỉ định độ rộng của đường kẻ giữa các cột. Nó được dùng trong bố cục nhiều cột.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .content {
            column-count: 3; 
            column-gap: 50px; 
            column-rule-style: solid; 
            column-rule-width: 10px; 
            text-align: justify;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="content">
        GeeksforGeeks is a computer science portal offering articles, tutorials, 
      and courses for coding and technical interview preparation. 
    </div>
</body>
</html>

<!--Driver Code Ends-->


In this Example:

  • column-rule-style: solid;: Chỉ định một đường liền nét giữa các cột.
  • column-rule-width: 10px;: Đặt độ rộng của đường kẻ cột thành 10px.

The column-rule-color property

Thuộc tính column-rule-color trong CSS chỉ định màu của đường kẻ giữa các cột. Nó được dùng trong bố cục nhiều cột.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .content {
            column-count: 3;
            column-rule-style: solid;
            column-rule-color: green;
            text-align: justify;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="content">
        GeeksforGeeks is a computer science portal offering articles,
      tutorials, and courses for coding and technical interview preparation.
    </div>
</body>
</html>

<!--Driver Code Ends-->


In this Example:

  • column-count: 3;: Divides the content into three columns.
  • column-rule-style: solid;: Chỉ định một đường liền nét giữa các cột.
  • column-rule-color: green;: Tô màu xanh lá cây cho đường kẻ cột, tạo bố cục hấp dẫn.

The column-rule property

Thuộc tính column-rule trong CSS cho phép bạn đặt kiểu, độ rộng, màu của đường kẻ giữa các cột. Nó được dùng trong bố cục nhiều cột.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .content {
            column-count: 3;
            padding-top: 35px;
            column-rule: 10px solid green; 
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="content">
        Sudo Placement: Prepare for the Recruitment
      drive of product-based companies like Microsoft, Amazon,
    </div>
</body>
</html>

<!--Driver Code Ends-->

In this Example:

  • column-count: 3;: Chia nội dung thành ba cột.
  • column-rule: 10px solid green;: Tạo một đường kẻ màu xanh lá cây liền nét rộng 10px giữa các cột.

The column-span property

Thuộc tính column-span trong CSS cho phép một phần tử trải dài trên nhiều cột. Nó được dùng trong bố cục nhiều cột. Bằng cách đặt thành all, bạn có thể làm cho một phần tử trải dài trên tất cả các cột.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
         .container {
            column-count: 3;
            column-gap: 20px;
            text-align: justify;
        }
        .geeks_content {
            column-span: all;
            font-weight: bold;
            margin-bottom: 10px;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
   <div class="container">
        <div class="geeks_content">
            Sudo Placement: Prepare for the Recruitment drive of product-based
            companies like Microsoft, Amazon, Adobe, etc.
        </div>
        GeeksforGeeks is a computer science portal offering articles, tutorials,
        and courses for coding and technical interview preparation. 
    </div>
</body>
</html>

<!--Driver Code Ends-->


In this Example:

  • column-span: all;: Thuộc tính này đảm bảo phần tử .content trải dài trên cả ba cột. Nó được dùng trong bố cục nhiều cột.
  • text-align: justify;: Thuộc tính này đảm bảo văn bản trong phần tử .geeks_content được căn đều. Văn bản được căn chỉnh đều dọc theo lề trái và lề phải.

The column-width property

Thuộc tính column-width trong CSS xác định độ rộng của mỗi cột. Nó được dùng trong bố cục nhiều cột.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .geeks_content {
            column-width: 250px; 
            text-align: justify;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="geeks_content">
        Sudo Placement: Prepare for the Recruitment
        drive of product-based companies like Microsoft,
        Amazon, Adobe, etc., with a free online placement
    </div>
</body>
</html>

<!--Driver Code Ends-->


In this Example:

  • column-width: 250px;: Đặt độ rộng lý tưởng cho mỗi cột là 250 pixel. Trình duyệt sẽ xác định số lượng cột dựa trên độ rộng và không gian khả dụng.

Best Practices for CSS Multiple Columns

  1. Maintain Readability: Tránh sử dụng quá nhiều cột vì nó có thể làm người dùng choáng ngợp.
  2. Responsive Design: Sử dụng media queries để điều chỉnh số lượng cột và độ rộng cho các kích thước màn hình khác nhau.
  3. Test on Devices: Đảm bảo bố cục nhiều cột của bạn trông đẹp trên nhiều thiết bị khác nhau.
  4. Align with Themes: Kết hợp các quy tắc và khoảng trống của cột với chủ đề thiết kế tổng thể để nhất quán.

Last Updated : 21/07/2025