Logo

Hướng Dẫn Chia Cột Trong CSS (Từ Cơ Bản Đến Nâng Cao)

Kiến thức Frontend

Hướng Dẫn Chia Cột Trong CSS (Từ Cơ Bản Đến Nâng Cao)

Khám phá các cách chia cột trong CSS từ float, inline-block, Flexbox, Grid đến column layout, giúp tạo layout responsive và đẹp mắt.

1. Sử dụng float (cách truyền thống)

.row {
  overflow: hidden; /* clear float */
}

.col {
  float: left;
  width: 33.33%; /* 3 cột */
  padding: 10px;
}

👉 Cách này thường dùng trong Bootstrap 3 và các framework cũ, nhưng ngày nay ít sử dụng do hạn chế trong responsive.

2. Sử dụng inline-block

.row {
  font-size: 0; /* fix khoảng trắng */
}

.col {
  display: inline-block;
  width: 33.33%;
  padding: 10px;
  font-size: 16px;
}

👉 Tránh lỗi float, nhưng phải xử lý khoảng trắng khi dùng inline-block.

3. Sử dụng Flexbox (phổ biến nhất hiện nay)

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* khoảng cách giữa các cột */
}

.col {
  flex: 1; /* chia đều */
  min-width: 200px; /* giới hạn nhỏ nhất */
}

👉 Ưu điểm: Dễ dùng, responsive tốt, code gọn.

4. Sử dụng CSS Grid (hiện đại & mạnh mẽ nhất)

.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 cột */
  gap: 1rem;
}

.col {
  background: #eee;
  padding: 10px;
}

👉 Grid mạnh hơn Flexbox khi làm layout phức tạp (nhiều hàng, nhiều cột).

5. Sử dụng Multi-column Layout (column-count)

.row {
  column-count: 3; /* số cột */
  column-gap: 1rem; /* khoảng cách */
}

.col {
  break-inside: avoid; /* tránh bị cắt nội dung */
}

👉 Thường dùng cho bài viết, tạp chí, blog (giống newspaper layout).

6. Sử dụng CSS Variables với Flexbox

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-1 * var(--gutter));
  --columns: 3;
  --gutter: 2rem;

  .col {
    width: calc((100% / var(--columns)) - var(--gutter));
    margin-left: var(--gutter);
    margin-bottom: var(--gutter);
  }
}

👉 Ưu điểm: tùy biến số cột và gutter bằng biến CSS, dễ maintain.

7. Sử dụng Frameworks (Bootstrap, Tailwind CSS)

  • Bootstrap:
<div class="row">
  <div class="col-4">Cột 1</div>
  <div class="col-4">Cột 2</div>
  <div class="col-4">Cột 3</div>
</div>
  • Tailwind:
<div class="grid grid-cols-3 gap-4">
  <div class="bg-gray-200 p-4">Cột 1</div>
  <div class="bg-gray-200 p-4">Cột 2</div>
  <div class="bg-gray-200 p-4">Cột 3</div>
</div>

👉 Phù hợp nếu bạn dùng sẵn framework CSS.

Kết luận

  • Nếu làm layout cơ bản, responsive → dùng Flexbox.

  • Nếu làm layout nhiều hàng, phức tạp → dùng CSS Grid.

  • Nếu làm bài viết dạng báo/tạp chí → dùng Multi-column.

  • Nếu muốn nhanh chóng → dùng Bootstrap / Tailwind.

  • Nếu muốn tùy biến linh hoạt → dùng CSS Variables + Flexbox/Grid.

Phản hồi (0)
0