Mengatur grid

Termasuk bagian Menguasai CSS dalam perjalanan HTML di Coddy. Pelajaran 35 dari 43.

Tantangan

Mudah

Dalam seri ini, kita akan membuat tata letak situs web responsif menggunakan CSS Grid.

Pertama, mari lihat apa yang akan kita buat:

Sebuah situs web dengan:

Header
Sidebar
Area konten utama
Footer

Beginilah tampilannya setelah selesai:

Mari mulai dengan membuat struktur grid keseluruhan untuk situs web! Tugasmu:

Ubah .container menjadi tata letak grid.
Buat struktur 3 kolom.
Tentukan tiga baris: satu untuk header, satu untuk konten utama, dan satu untuk footer.
Gunakan nama area grid untuk mengatur tata letak seperti ini:"header header header" "hero featured featured" “footer footer footer”

5. Tambahkan jarak di antara item dan di sekitar container agar tampilannya rapi.

6. Tetapkan nama grid-area yang tepat untuk setiap bagian menggunakan selector class: .header, .hero, .featured, dan .footer

Coba sendiri

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