63. Multiple Column Trong CSS

Multiple Column trong CSS: Thuộc tính column-count và column-width trong CSS cho phép bạn tạo một giao diện với nhiều cột dọc. Điều này hữu ích cho việc chia nội dung thành nhiều phần để giúp trình bày nội dung dễ đọc hơn trên các thiết bị rộng hơn. Dưới đây là một ví dụ cách sử dụng column-count để tạo nhiều cột trong CSS:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .multi-column-container {
      column-count: 3;
      column-gap: 20px;
    }

    .multi-column-item {
      margin-bottom: 15px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div class="multi-column-container">
    <div class="multi-column-item">Item 1</div>
    <div class="multi-column-item">Item 2</div>
    <div class="multi-column-item">Item 3</div>
    <div class="multi-column-item">Item 4</div>
    <div class="multi-column-item">Item 5</div>
    <div class="multi-column-item">Item 6</div>
    <div class="multi-column-item">Item 7</div>
    <div class="multi-column-item">Item 8</div>
    <div class="multi-column-item">Item 9</div>
    <div class="multi-column-item">Item 10</div>
  </div>
</body>
</html>

Trong ví dụ này:

Chúng ta sử dụng column-count: 3; để tạo 3 cột dọc. Nội dung sẽ được chia thành các cột dọc theo số lượng cột này.
Sử dụng column-gap: 20px; để tạo khoảng cách giữa các cột.
Chúng ta tạo một phần tử cha có class .multi-column-container để chứa các mục cần chia thành nhiều cột.
Sử dụng class .multi-column-item để tạo kiểu cho các mục.

Lưu ý rằng sự hỗ trợ cho nhiều cột có thể khác nhau trên các trình duyệt và thiết bị. Đôi khi, một số tính năng khác nhau của CSS Flexbox hoặc CSS Grid có thể được sử dụng để tạo giao diện nhiều cột phức tạp hơn.

Leave a Comment Cancel Reply