Grid Layout - Xây dựng giao diện linh hoạt

Grid Layout là một hệ thống bố cục mạnh mẽ trong CSS, giúp bạn sắp xếp các phần tử một cách khoa học và linh hoạt. Trong bài học này, chúng ta sẽ tìm hiểu về CSS Grid, hệ thống Grid của Bootstrap và cách áp dụng chúng trong thiết kế giao diện.

1. Giới thiệu về CSS Grid

CSS Grid là một hệ thống bố cục hai chiều giúp sắp xếp các phần tử theo hàng và cột.

1.1. Kích hoạt Grid Layout

Để sử dụng CSS Grid, cần đặt display: grid cho phần tử cha.

Ví dụ:

div {
    display: grid;
}

1.2. Thiết lập số cột bằng grid-template-columns

Dùng để chia bố cục thành nhiều cột với kích thước khác nhau.

Ví dụ:

div {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

fr là đơn vị linh hoạt, giúp phân chia không gian một cách tự động.

1.3. Khoảng cách giữa các ô bằng grid-gap

Dùng để tạo khoảng cách giữa các phần tử con.

Ví dụ:

div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

2. Hệ thống Grid trong Bootstrap

Bootstrap sử dụng hệ thống 12 cột giúp bố cục linh hoạt trên nhiều kích thước màn hình.

Ví dụ Bootstrap Grid:

<div class="container">
    <div class="row">
        <div class="col-6 bg-primary text-white">Cột 1</div>
        <div class="col-6 bg-secondary text-white">Cột 2</div>
    </div>
</div>

Lợi ích của Bootstrap Grid: Giúp thiết kế giao diện nhanh hơn, đảm bảo tính responsive mà không cần viết nhiều CSS.

3. Bài tập thực hành

Bài tập:

1. Tạo một bố cục trang web gồm 3 phần: header, nội dung chính (2 cột) và footer.
2. Sử dụng CSS Grid để thiết kế bố cục trên.
3. Áp dụng Bootstrap Grid để làm điều tương tự và so sánh cách làm.
4. Kiểm tra tính linh hoạt trên các kích thước màn hình khác nhau.

4. Kết luận

Qua bài học này, bạn đã hiểu cách sử dụng CSS Grid để tạo bố cục linh hoạt và cách hệ thống Grid của Bootstrap giúp tối ưu hóa thiết kế. Hãy thực hành nhiều hơn để nắm vững kỹ năng này!