Khóa học IT CSS Cơ bản 030_Bố cục đa cột Columns

Bố cục đa cột Columns

Columns (cột) là một thuộc tính được sử dụng để tạo nhiều cột trong bố cục văn bản. Bằng cách đặt số cột và chiều rộng cột của container, nội dung văn bản tự động chảy giữa nhiều cột. Columns (cột) không phù hợp với tất cả các loại nội dung, chủ yếu được sử dụng cho bố cục đa cột của nội dung văn bản, không phải cho bố cục của toàn bộ trang.

• column-count: Chỉ định số lượng cột.
• column-width: Chỉ định chiều rộng của mỗi cột.
• column-gap: Chỉ định khoảng cách giữa các cột.
• column-rule: Đặt đường phân cách giữa các cột.

Ví dụ:

1
.example{
2
    column-count: 3;
3
    /* column-width: 200px; */
4
    column-gap: 20px;
5
    column-rule: 1px solid red;
6
}
7
p {
8
    margin: 0 0 10px;
9
}

1
    <div class="example">
2
        <p>Đây là đoạn văn 111, đây là đoạn văn 111, đây là đoạn văn 111.</p>
3
        <p>Đây là đoạn văn 222, đây là đoạn văn 222, đây là đoạn văn 222.</p>
4
        <p>Đây là đoạn văn 333, đây là đoạn văn 333, đây là đoạn văn 333.</p>
5
    </div>

Hiệu ứng: