Mục lục nội dung

Giới thiệu về layout responsive

Trong thời đại thiết bị đa dạng, việc tạo giao diện web đáp ứng (responsive) là yêu cầu bắt buộc. Hai công cụ mạnh mẽ của CSS hiện nay là Flexbox và CSS Grid. Bài viết sẽ hướng dẫn cách sử dụng chúng để xây dựng layout linh hoạt, đồng thời so sánh ưu nhược điểm để bạn lựa chọn phù hợp.

Flexbox: Khi nào nên dùng?

Flexbox (Flexible Box Layout) được thiết kế để sắp xếp các phần tử trong một chiều (hàng hoặc cột). Nó rất thích hợp cho các thành phần như thanh điều hướng, card danh sách, hoặc các khối nội dung có chiều rộng/chiều cao thay đổi.

Cấu trúc cơ bản

Để kích hoạt Flexbox, chỉ cần đặt display: flex cho phần tử cha. Các thuộc tính như justify-content, align-items và flex-wrap sẽ điều khiển cách các phần tử con sắp xếp.

<style>
  .flex-container {
    display: flex;
    flex-wrap: wrap; /* cho phép chuyển dòng khi không đủ chỗ */
    justify-content: space-between; /* khoảng cách đều giữa các phần tử */
    align-items: stretch; /* chiều cao đồng nhất */
  }
  .flex-item {
    flex: 1 1 200px; /* grow, shrink, basis */
    margin: 10px;
    background: #f2f2f2;
    padding: 20px;
    box-sizing: border-box;
  }
</style>
<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

Trong ví dụ trên, mỗi .flex-item sẽ chiếm ít nhất 200px, nhưng nếu không đủ chỗ, chúng sẽ tự động chuyển sang dòng mới nhờ flex-wrap: wrap. Thuộc tính justify-content: space-between tạo khoảng cách đều giữa các phần tử.

CSS Grid: Khi nào nên dùng?

Grid cho phép định nghĩa một lưới hai chiều (hàng và cột) với độ linh hoạt cao. Nó thích hợp cho các bố cục phức tạp như trang chủ, bảng giá, hoặc dashboard.

Cấu trúc cơ bản

Đặt display: grid cho phần tử cha, sau đó dùng grid-template-columns và grid-template-rows để xác định kích thước cột, hàng. Thuộc tính gap (hoặc grid-gap) tạo khoảng cách giữa các ô.

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: minmax(150px, auto);
    gap: 15px;
  }
  .grid-item {
    background: #e0e0e0;
    padding: 20px;
    box-sizing: border-box;
  }
</style>
<div class="grid-container">
  <div class="grid-item">Header</div>
  <div class="grid-item">Sidebar</div>
  <div class="grid-item">Content</div>
  <div class="grid-item">Footer</div>
</div>

Ở đây, repeat(auto-fit, minmax(250px, 1fr)) tạo các cột có chiều rộng tối thiểu 250px, nhưng sẽ mở rộng để lấp đầy không gian còn lại. Khi màn hình thu hẹp, các cột sẽ tự động xếp chồng lên nhau, giúp giao diện luôn hiển thị tốt.

So sánh Flexbox và Grid

  • Chiều hướng: Flexbox làm việc tốt trong một chiều, Grid hỗ trợ hai chiều.
  • Độ phức tạp: Flexbox dễ học, thích hợp cho các thành phần đơn giản. Grid có cú pháp phức tạp hơn nhưng mạnh mẽ cho bố cục tổng thể.
  • Khả năng đáp ứng: Cả hai đều hỗ trợ media queries để tùy chỉnh cho các breakpoint.

Kết luận

Việc lựa chọn Flexbox hay Grid phụ thuộc vào mức độ phức tạp của layout mà bạn muốn xây dựng. Đối với các thành phần đơn lẻ, Flexbox là lựa chọn nhanh chóng; còn đối với bố cục toàn trang, Grid mang lại khả năng kiểm soát tối đa. Kết hợp cả hai sẽ giúp bạn tạo ra các giao diện responsive, hiện đại và dễ bảo trì.

Để nắm vững kiến thức và thực hành ngay, bạn có thể Tham khảo khóa học "HTML - CSS dành cho người mới bắt đầu" tại đây.