Benannte Bereiche

Teil des Abschnitts CSS Mastery der HTML-Journey von Coddy — Lektion 33 von 43.

Anstatt Elemente mithilfe von Liniennummern zu platzieren, können Sie Teilen Ihres Grids mithilfe der Eigenschaft grid-template-areas Namen geben. Diese Methode eignet sich hervorragend für die Erstellung sauberer, lesbarer Layouts – insbesondere bei der Arbeit mit mehreren Abschnitten wie Headern, Sidebars und Footern. Schauen Sie sich das folgende Beispiel an:

Wir definieren einen Container mit CSS Grid und verwenden grid-template-areas, um ein benanntes Layout zu erstellen:

.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";
}

Jede Textzeile bildet eine Zeile, und jedes Wort in der Zeile ist ein Teil des Rasters. Wenn Sie ein Wort wiederholen, erstreckt sich dieser Bereich über mehr Platz.

Anschließend ordnen Sie Ihre HTML-Elemente diesen Namen wie folgt zu:

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

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Aufgabe

Einfach

Erstelle ein CSS-Grid-Layout für eine einfache Webseite mit den folgenden Bereichen, wie auf dem Bild unten zu sehen:

Setze die folgenden Eigenschaften für den .container-Selektor:

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

Weise jedes Element seinem jeweiligen Bereich zu. Setze zum Beispiel für .header die Eigenschaft grid-area auf header.

Spickzettel

Verwenden Sie grid-template-areas, um benannte Grid-Layouts zu erstellen:

.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";
}

Jede Textzeile bildet eine Zeile, und jedes Wort in der Zeile ist ein Teil des Grids. Das Wiederholen eines Wortes dehnt diesen Bereich über mehr Platz aus.

Weisen Sie Elementen Grid-Bereiche mit grid-area zu:

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

Probier es selbst

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

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.