Lektionen
Start
Jetzt lernen
CodeGym /Kurse /Frontend SELF DE /Grid Areas

Grid Areas

Frontend SELF DE
Level 28 , Lektion 3
Verfügbar

9.1 Eigenschaft grid-template-areas

CSS Grid Layout bietet ernsthafte Möglichkeiten zum Erstellen komplexer Layouts mit benannten Bereichen (grid areas). Die Eigenschaft grid-template-areas ermöglicht es, Grid-Bereiche zu definieren, die zur vereinfachten Platzierung von Elementen verwendet werden können. Diese Eigenschaft erlaubt es Entwicklern, das Layout visuell zu organisieren und die Wartung zu erleichtern.

Grundkonzepte von grid-template-areas

  1. Definition von Bereichen:
    • Die Eigenschaft grid-template-areas erlaubt die Benennung verschiedener Bereiche des Grids
    • Jeder Bereichsname repräsentiert eine rechteckige Gruppe von Zellen
  2. Verwendung benannter Bereiche:
    • Definierte Bereiche können zur Platzierung von Elementen verwendet werden, indem man die Eigenschaft grid-area für jedes Element setzt

Syntax von grid-template-areas:

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

Syntax für Grid-Elemente:

    
      .header {
        grid-area: header;
      }

      .sidebar {
        grid-area: sidebar;
      }

      .main {
        grid-area: main;
      }

      .footer {
        grid-area: footer;
      }
Java university

Erklärung:

  • Jede Zeile im Wert von grid-template-areas repräsentiert eine Zeile im Grid
  • Jedes Wort in der Zeile steht für eine Zelle oder eine Gruppe von Zellen
  • Punkte (.) können für leere Zellen verwendet werden

9.2 Beispiel zur Verwendung von grid-template-areas

Beispiel einer vollständigen Implementierung:

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

Codeerklärung:

  • .grid-container: definiert den Grid-Container mit display: grid und legt das Grid-Layout mit grid-template-areas fest. In diesem Fall besteht das Layout aus drei Zeilen: die erste Zeile ist der Header, die zweite Zeile besteht aus einer Sidebar und dem Hauptinhalt, die dritte Zeile ist der Footer
  • .header, .sidebar, .main, .footer: definieren die Stile für die verschiedenen Grid-Bereiche und verknüpfen diese Bereiche mit den Namen in grid-template-areas über die Eigenschaft grid-area

9.3 Umgang mit leeren Bereichen

Die Eigenschaft grid-template-areas erlaubt es, Bereiche leer zu lassen, indem man das Symbol Punkt (.) verwendet, um leeren Raum zu kennzeichnen.

Beispiel einer vollständigen Implementierung:

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

Codeerklärung:

  • .grid-container: erstellt den Grid-Container mit drei Bereichen: Header, Hauptinhalt und Footer. Die mittlere Zeile enthält leere Bereiche links und rechts vom Hauptinhalt
  • .header, .main, .footer: definieren die Stile für die Bereiche und verknüpfen sie mit den Bereichsnamen in grid-template-areas
Kommentare
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION