Thử thách ôn tập

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

Thử thách

Dễ

Dùng CSS Grid để tạo bố cục gọn gàng với phần đầu trang và thư viện ảnh gồm 3 hình trên cùng một hàng như trong hình bên dưới:

Đặt .container thành display: grid và thêm khoảng cách gap giữa các mục.
Tạo lưới có 2 hàng và 3 cột.
Xác định các vùng lưới bằng:
grid-template-areas: "header header header" "img1 img2 img3";
Gán từng mục trong lưới vào vùng tương ứng bằng thuộc tính grid-area.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
  <style>
    body{
        margin: 0;
        padding: 0;
    }
    img{
        width: 100%;
    }
    .header{
        text-align: center;
        padding: 10px;
        background-color: #afe1e3; 
    }
    /* Add you CSS code here */

  </style>
</head>
<body>
  <div class="container">
    <div class="header">My Gallery</div>
    <div class="img1"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Burchell%27s_zebra_%28Equus_quagga_burchellii%29_2.jpg"></div>
    <div class="img2"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Zebra_zebras_-_tarangire_tanzania_africa.jpg"></div>
    <div class="img3"><img src="https://upload.wikimedia.org/wikipedia/commons/1/11/Zebra-Lake_Nakuru.jpg"></div>
</div>
</body>
</html>