Aree denominate

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

Invece di posizionare gli elementi usando i numeri di riga, puoi assegnare nomi alle parti della griglia usando la proprietà grid-template-areas. Questo metodo è ottimo per creare layout chiari e leggibili, soprattutto quando lavori con più sezioni, come intestazioni, barre laterali e piè di pagina. Dai un’occhiata all’esempio qui sotto:

Definiamo un contenitore con CSS Grid e usiamo grid-template-areas per creare un layout con nomi:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

Ogni riga di testo crea una riga della griglia e ogni parola nella riga è una parte della griglia. Se ripeti una parola, quell’area si estenderà su più spazio.

Poi, abbini i tuoi elementi HTML a quei nomi in questo modo:

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Sfida

Facile

Crea un layout a griglia CSS per una pagina web di base con le seguenti aree, come nell’immagine qui sotto:

Imposta le seguenti proprietà sul selettore .container:

display su grid
grid-template-columns su 1fr 3fr
grid-template-rows su auto 1fr auto
grid-template-areas su:
"header header"
"profile main"
"footer footer"

Assegna ogni elemento alla rispettiva area. Ad esempio, per .header imposta grid-area su header.

Provalo tu

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      height: 100vh;
      gap: 10px;
      /* Set up your grid container here */
      
    }
    
    .header {
      /* Assign to header area */
      background-color: #f1c40f;
      padding: 20px;
    }
    
    .profile {
      /* Assign to profile area */
      background-color: #3498db;
      padding: 20px;
    }
    
    .main {
      /* Assign to main area */
      background-color: #2ecc71;
      padding: 20px;
    }
    
    .footer {
      /* Assign to footer area */
      background-color: #e74c3c;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="profile">Profile</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>