1. Grid System là gì trong Bootstrap 5?

Bootstrap 5 Grid System (hệ thống lưới) là một trong những công cụ mạnh mẽ giúp bạn tạo ra bố cục responsive (tương thích với mọi kích thước màn hình) một cách dễ dàng và linh hoạt. Hệ thống lưới này dựa trên nguyên tắc chia trang web thành 12 cột, cho phép bạn xây dựng các bố cục phức tạp mà vẫn duy trì được sự nhất quán giữa các kích thước màn hình.

Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về grid system, các class lưới (grid classes), cấu trúc, và cách tạo các cột responsive.

2. Gird options

Bảng sau đây tóm tắt cách hệ thống lưới Bootstrap 5 hoạt động trên các kích thước màn hình khác nhau:

3. Cấu trúc của Bootstrap 5 Grid System

Hệ thống lưới trong Bootstrap 5 dựa trên ba thành phần chính:

1. Container: Là thành phần cơ bản để giới hạn chiều rộng của trang web và chứa các hàng (rows) và cột (columns).
2. Row: Là hàng ngang chứa các cột.
3. Column: Là các cột chứa nội dung và được bố trí theo lưới 12 cột.

Cấu trúc cơ bản:

<div class="container">
    <div class="row">
        <div class="col">
            Cột 1
        </div>
        <div class="col">
            Cột 2
        </div>
        <div class="col">
            Cột 3
        </div>
    </div>
</div>

4. Các class lưới (Grid Classes)

Bootstrap cung cấp các class lưới để dễ dàng điều chỉnh bố cục. Các class phổ biến bao gồm:

• .container: Để chứa nội dung với chiều rộng cố định (tùy thuộc vào kích thước màn hình).
• .container-fluid: Để chứa nội dung với chiều rộng toàn màn hình (100%).
• .row: Tạo một hàng chứa các cột.
• .col: Tạo cột có kích thước tự động chia đều trên hàng.
• .col-*: Đặt kích thước cột cụ thể (ví dụ: .col-4 sẽ chiếm 4 cột trong lưới 12 cột).

Ví dụ sử dụng .col-*:

<div class="container">
    <div class="row">
        <div class="col-6">Cột chiếm 6 cột</div>
        <div class="col-6">Cột chiếm 6 cột</div>
    </div>
</div>

5. Cấu trúc của Bootstrap Grid System

Hệ thống lưới của Bootstrap 5 hoạt động dựa trên nguyên tắc 12 cột. Điều này có nghĩa là trong một hàng, tổng số cột bạn thêm vào không được vượt quá 12. Ví dụ:

• Bạn có thể có 12 cột, mỗi cột chiếm 1 phần.
• Hoặc bạn có thể có 3 cột, mỗi cột chiếm 4 phần.
• Hoặc bạn có thể tạo bố cục khác, miễn là tổng số cột trong hàng không vượt quá 12.

Ví dụ:

<div class="container">
    <div class="row">
        <div class="col-4">Cột 1 (chiếm 4 cột)</div>
        <div class="col-4">Cột 2 (chiếm 4 cột)</div>
        <div class="col-4">Cột 3 (chiếm 4 cột)</div>
    </div>
</div>

6. Cột Responsive trong Bootstrap 5

Một tính năng quan trọng của Bootstrap là hệ thống responsive columns cho phép bạn thay đổi cách cột hiển thị trên các kích thước màn hình khác nhau. Bạn có thể sử dụng các class responsive sau để thiết lập độ rộng cột:

• .col-sm-*: Áp dụng cho màn hình nhỏ trở lên (≥576px).
• .col-md-*: Áp dụng cho màn hình trung bình trở lên (≥768px).
• .col-lg-*: Áp dụng cho màn hình lớn trở lên (≥992px).
• .col-xl-*: Áp dụng cho màn hình rất lớn trở lên (≥1200px).
• .col-xxl-*: Áp dụng cho màn hình cực lớn trở lên (≥1400px).

Ví dụ cột responsive:

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-6 col-md-4">Cột 1</div>
        <div class="col-12 col-sm-6 col-md-4">Cột 2</div>
        <div class="col-12 col-md-4">Cột 3</div>
    </div>
</div>

• Trên màn hình rất nhỏ (<576px), cả ba cột sẽ chiếm toàn bộ chiều rộng (12 cột).
• Trên màn hình nhỏ (≥576px), cột 1 và cột 2 sẽ chiếm 6 cột mỗi cột, cột 3 sẽ chiếm toàn bộ (12 cột).
• Trên màn hình trung bình trở lên (≥768px), tất cả các cột sẽ chiếm 4 cột mỗi cột.

7. Sử dụng Gutter để kiểm soát khoảng cách giữa các cột

Bootstrap 5 cung cấp các class tiện ích gutter để tùy chỉnh khoảng cách giữa các cột. Bạn có thể sử dụng class .g-* để điều chỉnh khoảng cách giữa các cột:

Ví dụ điều chỉnh khoảng cách giữa các cột:

<div class="container">
    <div class="row g-3"> <!-- Khoảng cách giữa các cột là 3 -->
        <div class="col">Cột 1</div>
        <div class="col">Cột 2</div>
        <div class="col">Cột 3</div>
    </div>
</div>

• .g-0: Không có khoảng cách giữa các cột.
• .g-1 đến .g-5: Tạo khoảng cách từ nhỏ đến lớn giữa các cột.

8. Offset trong Bootstrap 5

Offset giúp bạn đẩy cột sang phải bằng cách thêm khoảng trống trước cột. Điều này rất hữu ích khi bạn muốn tạo khoảng trống giữa các cột mà không cần thêm cột rỗng.

Ví dụ sử dụng offset:

<div class="container">
    <div class="row">
        <div class="col-4 offset-2">Cột có offset 2</div>
        <div class="col-4">Cột kế bên</div>
    </div>
</div>

• Cột đầu tiên sẽ được đẩy sang phải bởi 2 cột (sử dụng offset-2), tạo khoảng trống giữa nó và cạnh trái của vùng chứa.

9. Lồng hệ thống lưới (Nesting Grids)

Bạn có thể lồng hệ thống lưới bên trong một cột khác để tạo các bố cục phức tạp hơn. Điều này đặc biệt hữu ích khi bạn muốn chia nhỏ một cột thành nhiều cột con.

Ví dụ về lưới lồng nhau:

<div class="container">
    <div class="row">
        <div class="col-6">
            Cột lớn 1
            <div class="row">
                <div class="col-6">Cột con 1</div>
                <div class="col-6">Cột con 2</div>
            </div>
        </div>
        <div class="col-6">
            Cột lớn 2
        </div>
    </div>
</div>

Trong ví dụ này, cột lớn 1 chứa một hàng mới với hai cột con. Các cột con này sẽ chia đều không gian trong cột lớn 1.

10. Thực hành ví dụ Grid System

Ví dụ tạo bố cục đơn giản với hệ thống lưới Bootstrap 5:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Grid Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-8 bg-light p-3">Cột chính (chiếm 8 cột trên màn hình trung bình trở lên)</div>
            <div class="col-6 col-md-4 bg-primary text-white p-3">Cột phụ (chiếm 4 cột trên màn hình trung bình trở lên)</div>
            <div class="col-6 col-md-4 bg-secondary text-white p-3">Cột phụ (chiếm 4 cột trên màn hình trung bình trở lên)</div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

11. Kết luận

Bootstrap 5 Grid System là một công cụ mạnh mẽ giúp bạn tạo ra bố cục web responsive một cách dễ dàng và hiệu quả. Với hệ thống lưới 12 cột, bạn có thể tùy chỉnh bố cục cho mọi kích thước màn hình, từ điện thoại di động đến máy tính để bàn.

Việc hiểu rõ và sử dụng linh hoạt các class grid classes, như .col-*, .row, .gutter, và .offset, sẽ giúp bạn xây dựng các trang web chuyên nghiệp, thân thiện với người dùng trên mọi thiết bị.

Hãy áp dụng các kiến thức này vào các dự án thực tế của bạn để hiểu rõ hơn cách hoạt động của Bootstrap 5 Grid System trên CodeTutHub!