Cơ bản về Grid

Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 31 trên 43.

CSS Grid là một hệ thống bố cục giúp bạn dễ dàng tạo trang web với các hàng và cột. Công cụ này rất phù hợp để xây dựng bố cục phức tạp và thích ứng mà không cần dùng float hay cách định vị phức tạp. Ngoài ra, CSS Grid hoạt động trên mọi trình duyệt hiện đại.

Để tạo vùng chứa dạng lưới, hãy dùng thuộc tính display:

.container {
  display: grid;
}

Xác định các cột trong lưới bằng grid-template-columns với đơn vị px hoặc fr (phân số):

/* Đoạn này tạo ba cột, trong đó cột giữa chiếm không gian gấp đôi mỗi cột còn lại. */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Xác định các hàng bằng grid-template-rows. Dùng thuộc tính gap để tạo khoảng cách giữa các mục trong lưới.

/* Tạo một lưới gồm hai hàng: hàng đầu cao 100px, hàng thứ hai cao 200px */
.container {
  display: grid;
  grid-template-rows: 100px 200px;
  gap: 20px;
}

Thử thách

Dễ

Tạo một quy tắc CSS cho lớp có tên grid-container để:

Đặt thuộc tính display để tạo lưới
Tạo ba cột có chiều rộng bằng nhau bằng đơn vị fr
Tạo hai hàng: hàng đầu tiên cao 150px và hàng thứ hai cao 250px
Thêm khoảng cách 20px giữa tất cả các mục trong lưới

Chỉ viết mã CSS cho lớp grid-container.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <style>
        .item{
            border: 2px solid black;
            background-color: #82f5d0;
        }
     /* Add your CSS code here: */
    
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>
</html>