Thiết lập lưới

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

Thử thách

Dễ

Trong loạt bài này, chúng ta sẽ tạo bố cục trang web thích ứng bằng CSS Grid.

Trước tiên, hãy xem chúng ta sẽ tạo những gì:

Một trang web gồm có:

Phần đầu trang
Thanh bên
Khu vực nội dung chính
Chân trang

Sau khi hoàn thành, trang web sẽ trông như thế này:

Hãy bắt đầu bằng cách tạo cấu trúc lưới tổng thể cho trang web! Nhiệm vụ của bạn:

Chuyển .container thành bố cục dạng lưới.
Tạo cấu trúc gồm 3 cột.
Xác định ba hàng: một hàng cho phần đầu trang, một hàng cho nội dung chính và một hàng cho chân trang.
Dùng tên vùng lưới để sắp xếp bố cục như sau:"header header header" "hero featured featured" “footer footer footer”

5. Thêm khoảng cách giữa các mục và xung quanh vùng chứa để bố cục trông gọn gàng.

6. Gán tên grid-area phù hợp cho từng phần bằng bộ chọn lớp: .header, .hero, .featured và .footer

Tự làm thử

<html>
<head>
  <title>FlavorFiesta</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <header class="header">FlavorFiesta</header>
    
    <section class="hero">
      <h1>Delicious Recipes & Culinary Adventures</h1>
      <p>Your daily dose of flavor, fun, and food!</p>
    </section>
    
    <section class="featured">
      <h2>Featured Recipes</h2>
      <div class="recipe-grid">
        <div class="recipe-card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Food-pasta-spinach_%2824218510092%29.jpg" alt="Pasta">
          <p> Creamy Spinach Pasta</p>
        </div>
        <div class="recipe-card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/NCI_Visuals_Food_Hamburger.jpg" alt="Burger">
          <p> Classic Beef Burger</p>
        </div>
        <div class="recipe-card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/1/1e/Quinoa%2C_Black_Bean%2C_and_Mango_Salad.png" alt="Salad">
          <p> Quinoa & Avocado Salad</p>
        </div>
      </div>
    </section>   
    <footer class="footer">
      <p>© 2025 FlavorFiesta | Follow us @flavorfiesta</p>
    </footer>
  </div>
</body>
</html>