Ví dụ CSS Grid Bài 13: Grid trong Grid

CSS Grid là một cách bố cục rất hay và hiệu quả. Ở các bài trước các bạn đã biết tạo Grid để sắp xếp các item.

Tuy nhiên, bạn đã từng thắc mắc liệu trong các ô bên trong grid thì có bố trí được thêm các grid nữa hay không chưa?

Thông báo cho bạn tin mừng là điều này hoàn toàn có thể.

Theo bản đặc tả kỹ thuật thì chúng ta hoàn toàn có thể tạo các Grid lồng nhau. (Grid trong Grid). Bạn có thể xem hình bên dưới để hình dung rõ hơn.

Ví dụ tạo Grid lồng nhau

Ok, chúng ta sẽ vào tạo Grid lồng Grid bằng code ngay:

Tạo Grid trong Grid

Để tạo Grid bên trong Grid chúng ta chỉ việc sử dụng thuộc tính display: grid; để chỉ định trong ô lưới này sẽ tạo một lưới nữa.

Demo code:

Trong ví dụ này, tôi đặt các div E, F, G bên trong div D, sau đó sử đặt thuộc tính display: grid; cho div D.

Và định nghĩa item D như sau:

    .d{
        grid-column: col 3 / span 2;
        grid-row: row 2;
        display: grid; /*Khai báo Grid*/
        grid-gap: 10px; /*Khoảng cách giữa các ô là 10px*/
        grid-template-columns: 1fr 1fr; /*Chiều rộng mỗi cột là 1fr, một hàng sẽ tạo 2fr*/
    }

Kích thước của div D là tại hàng thứ 2 kéo dài 3 span từ cột số 3. Ở đây chiều cao của hàng chúng ta không khai báo thì sẽ theo mặc định.

Vậy bạn nghĩ có thể tạo bao nhiêu grid trong grid?

Hãy thử tiếp tục tạo các Grid bên trong phần tử con của div D xem thế nào nhé.

Thêm nữa, thử áp dụng 3 hàm đã học từ bài luyện tập hàm repeat để áp dụng thiết kế responsive cho grid trên.

Vậy là bạn đã biết cách tạo Grid trong Grid, bây giờ bạn đã có khá đủ kiến thức về Grid để tạo layout cho website riêng của mình rồi đấy.

NOTE: Hãy thử thay đổi ít nhất 7 phiên bản khác nhau trước khi sang bài tiếp theo.

Bài tiếp theo: Ví dụ CSS Grid Bài 14: Justify-items và Justify-self