设置网格布局

本课属于 Coddy HTML 学习旅程的“精通 CSS”单元。第 35 课，共 43 课。

挑战

简单

在这一系列课程中，我们将使用 CSS Grid 构建响应式网站布局。

首先，来看看我们要创建什么：

一个包含以下部分的网站：

页眉
侧边栏
主要内容区
页脚

完成后的效果如下：

先来创建网站的整体网格结构吧！你的任务：

将 .container 转换为网格布局。
创建一个 3 列结构。
定义 3 行：一行用于页眉，一行用于主要内容，一行用于页脚。
使用网格区域名称按以下方式排列布局："header header header" "hero featured featured" “footer footer footer”

5. 在项目之间以及容器周围添加一些间距，让布局看起来更整洁。

6. 使用类选择器为每个单元指定正确的 grid-area 名称：.header、.hero、.featured 和 .footer

亲手试试

<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>