Benannte Bereiche

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

Statt Elemente mithilfe von Zeilennummern zu platzieren, kannst du Teilen deines Rasters mit der Eigenschaft grid-template-areas Namen geben. Diese Methode eignet sich hervorragend zum Erstellen übersichtlicher, gut lesbarer Layouts, insbesondere bei der Arbeit mit mehreren Bereichen wie Kopfzeilen, Seitenleisten und Fußzeilen. Sieh dir 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 du ein Wort wiederholst, erstreckt sich dieser Bereich über mehr Platz.

Dann ordnest du deine HTML-Elemente diesen Namen folgendermaßen zu:

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

Aufgabe

Einfach

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

Lege die folgenden Eigenschaften für den Selektor .container fest:

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 beispielsweise für .header grid-area auf header.

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>