Impostare la griglia

Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 35 di 43.

Sfida

Facile

In questa serie, realizzeremo il layout di un sito web responsivo usando CSS Grid.

Per prima cosa, diamo un’occhiata a ciò che creeremo:

Un sito web con:

Un’intestazione
Una barra laterale
Un’area di contenuto principale
Un piè di pagina

Ecco come apparirà una volta terminato:

Iniziamo creando la struttura complessiva della griglia per il sito web! I tuoi compiti:

Trasforma .container in un layout a griglia.
Crea una struttura a 3 colonne.
Definisci tre righe: una per l’intestazione, una per il contenuto principale e una per il piè di pagina.
Usa i nomi delle aree della griglia per disporre il layout in questo modo:"header header header" "hero featured featured" “footer footer footer”

5. Aggiungi un po’ di spazio tra gli elementi e intorno al contenitore per ottenere un aspetto ordinato.

6. Assegna il nome grid-area corretto a ogni sezione usando i selettori di classe: .header, .hero, .featured e .footer

Provalo tu

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