Mục lục nội dung

Giới thiệu

Trong phát triển giao diện web, việc tạo layout đáp ứng (responsive) là một kỹ năng quan trọng. Hai công cụ mạnh mẽ hiện nay là Flexbox và CSS Grid. Bài viết sẽ hướng dẫn cách sử dụng chúng một cách thực tế, giúp bạn nhanh chóng thiết kế trang web linh hoạt mà không cần tới các framework phức tạp.

Flexbox cơ bản

Flexbox (Flexible Box Layout) được thiết kế để sắp xếp các phần tử con trong một container theo một chiều (hàng hoặc cột). Các thuộc tính quan trọng bao gồm:

  • display: flex; – kích hoạt Flexbox cho container.
  • flex-direction – xác định hướng (row, column).
  • justify-content – căn chỉnh các mục theo trục chính.
  • align-items – căn chỉnh các mục theo trục phụ.

Ví dụ thực tế

Dưới đây là một thanh navigation đơn giản sử dụng Flexbox, có thể tự động gập lại khi màn hình thu hẹp.

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Navigation</title>
    <style>
        .nav {
            display: flex;
            flex-wrap: wrap; /* cho phép các mục xuống dòng khi không đủ chỗ */
            background: #2c3e50;
            padding: 0.5rem;
        }
        .nav a {
            color: #ecf0f1;
            text-decoration: none;
            padding: 0.5rem 1rem;
            flex: 1 1 auto; /* các mục co giãn đều */
            text-align: center;
        }
        .nav a:hover {
            background: #34495e;
        }
    </style>
</head>
<body>
    <nav class="nav">
        <a href="#">Trang chủ</a>
        <a href="#">Giới thiệu</a>
        <a href="#">Dịch vụ</a>
        <a href="#">Liên hệ</a>
    </nav>
</body>
</html>

Với flex-wrap: wrap, khi chiều rộng màn hình giảm, các liên kết sẽ tự động chuyển xuống dòng, giữ được độ đọc được và không tràn ra ngoài.

CSS Grid cơ bản

CSS Grid cho phép tạo ra lưới hai chiều, rất thích hợp cho các layout phức tạp như trang chủ, blog hay dashboard. Các thuộc tính chủ đạo:

  • display: grid; – kích hoạt Grid cho container.
  • grid-template-columns và grid-template-rows – định nghĩa số cột và hàng.
  • gap – khoảng cách giữa các ô.
  • grid-area – đặt tên cho vùng và gán phần tử vào vùng đó.

Ví dụ thực tế

Dưới đây là một bố cục blog đơn giản với header, sidebar, nội dung chính và footer.

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Layout</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-areas:
                "header header"
                "sidebar main"
                "footer footer";
            grid-template-columns: 1fr 3fr;
            gap: 1rem;
            min-height: 100vh;
        }
        header { grid-area: header; background: #2980b9; color: #fff; padding: 1rem; }
        nav    { grid-area: sidebar; background: #ecf0f1; padding: 1rem; }
        main   { grid-area: main; background: #fff; padding: 1rem; }
        footer { grid-area: footer; background: #34495e; color: #fff; text-align: center; padding: 0.5rem; }
        @media (max-width: 600px) {
            .grid-container {
                grid-template-areas:
                    "header"
                    "main"
                    "sidebar"
                    "footer";
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <header>Tiêu đề Blog</header>
        <nav>Danh mục</nav>
        <main>Nội dung chính</main>
        <footer>Bản quyền © 2024</footer>
    </div>
</body>
</html>

Đoạn @media ở cuối giúp chuyển bố cục sang dạng một cột duy nhất khi màn hình hẹp, minh họa cách kết hợp Grid với media queries để đạt responsive.

Mẹo tối ưu responsive

1. Sử dụng flex-wrap và grid-template-areas để cho phép các phần tử tự động thay đổi vị trí.
2. Đặt max-width: 100% cho hình ảnh và video để tránh tràn ra ngoài.
3. Áp dụng rem hoặc vw cho kích thước font nhằm duy trì tỉ lệ trên mọi thiết bị.
4. Kiểm tra trên các breakpoint phổ biến (320px, 768px, 1024px) bằng @media để tinh chỉnh.

Kết luận

Flexbox và CSS Grid là hai công cụ mạnh mẽ, mỗi công cụ có ưu thế riêng: Flexbox thích hợp cho việc sắp xếp một chiều, còn Grid lý tưởng cho bố cục đa chiều. Khi kết hợp chúng cùng với media queries, bạn có thể tạo ra các giao diện đáp ứng mượt mà, phù hợp với mọi kích thước màn hình. Để nắm vững cách áp dụng thực tế và có dự án mẫu hoàn chỉnh, Tham khảo khóa học "HTML - CSS dành cho người mới bắt đầu" tại đây.