Lezioni
Inizia
Inizia il corso
CodeGym /Corsi /Frontend SELF IT /Grid Areas

Grid Areas

Frontend SELF IT
Livello 28 , Lezione 3
Disponibile

9.1 Proprietà grid-template-areas

CSS Grid Layout offre grandi possibilità per la creazione di layout complessi tramite aree nominate (grid areas). La proprietà grid-template-areas permette di definire aree della griglia, che possono essere utilizzate per posizionare gli elementi in modo più semplice. Questa proprietà consente ai developer di organizzare visivamente il layout e facilitarne la manutenzione.

Concetti principali di grid-template-areas

  1. Definizione delle aree:
    • La proprietà grid-template-areas permette di assegnare nomi a diverse aree della griglia
    • Ogni nome area rappresenta un gruppo rettangolare di celle
  2. Uso delle aree nominate:
    • Le aree definite possono essere utilizzate per il posizionamento degli elementi, impostando la proprietà grid-area per ciascun elemento

Sintassi grid-template-areas:

    
      .container {
        display: grid;
        grid-template-areas:
          "header header header"
          "sidebar main main"
          "footer footer footer"
      }

Sintassi per elementi Grid:

    
      .header {
        grid-area: header;
      }

      .sidebar {
        grid-area: sidebar;
      }

      .main {
        grid-area: main;
      }

      .footer {
        grid-area: footer;
      }

Spiegazione:

  • Ogni riga nel valore di grid-template-areas rappresenta una riga nella griglia
  • Ogni parola in una riga rappresenta una cella o un gruppo di celle
  • I punti (.) possono essere utilizzati per le celle vuote

9.2 Esempio di utilizzo di grid-template-areas

Esempio di implementazione completa:

CSS
    
      .grid-container {
        display: grid;
        grid-template-areas:
          "header header header"
          "sidebar main main"
          "footer footer footer";
        grid-gap: 10px;
      }

      .header {
        grid-area: header;
        background-color: #2ecc71;
        padding: 20px;
        text-align: center;
      }

      .sidebar {
        grid-area: sidebar;
        background-color: #3498db;
        padding: 20px;
        text-align: center;
      }

      .main {
        grid-area: main;
        background-color: #9b59b6;
        padding: 20px;
        text-align: center;
      }

      .footer {
        grid-area: footer;
        background-color: #e74c3c;
        padding: 20px;
        text-align: center;
      }
HTML
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Esempio Grid Areas</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="header">Header</div>
            <div class="sidebar">Sidebar</div>
            <div class="main">Main Content</div>
            <div class="footer">Footer</div>
          </div>
        </body>
      </html>

Spiegazione del codice:

  • .grid-container: definisce il contenitore Grid utilizzando display: grid e imposta il layout della griglia usando grid-template-areas. In questo caso, il layout è composto da tre righe: la prima riga è l'intestazione, la seconda riga è costituita dalla barra laterale e dal contenuto principale, la terza riga è il footer
  • .header, .sidebar, .main, .footer: definiscono gli stili per le varie aree della griglia e collegano queste aree con i nomi in grid-template-areas tramite la proprietà grid-area

9.3 Gestione delle aree vuote

La proprietà grid-template-areas consente di lasciare aree vuote, utilizzando il punto (.) per indicare lo spazio vuoto.

Esempio di implementazione completa:

CSS
    
      .grid-container {
        display: grid;
        grid-template-areas:
          "header header header"
          ". main ."
          "footer footer footer";
        grid-gap: 10px;
      }

      .header {
        grid-area: header;
        background-color: #2ecc71;
        padding: 20px;
        text-align: center;
      }

      .main {
        grid-area: main;
        background-color: #9b59b6;
        padding: 20px;
        text-align: center;
      }

      .footer {
        grid-area: footer;
        background-color: #e74c3c;
        padding: 20px;
        text-align: center;
      }
HTML
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Aree Vuote Grid Areas</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="header">Header</div>
            <div class="main">Main Content</div>
            <div class="footer">Footer</div>
          </div>
        </body>
      </html>

Spiegazione del codice:

  • .grid-container: crea un contenitore Grid con tre aree: intestazione, contenuto principale e footer. La riga centrale contiene aree vuote a sinistra e a destra del contenuto principale
  • .header, .main, .footer: definiscono gli stili per le aree e le collegano con i nomi delle aree in grid-template-areas
Commenti
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION