Flexibler Platz

6.1 Die Eigenschaft grid-gap

CSS Grid Layout bietet flexible Werkzeuge zur Verwaltung des Zwischenraums zwischen den Grid-Elementen. Die Eigenschaften grid-gap, grid-row-gap und grid-column-gap ermöglichen es dir, Abstände zwischen Zeilen und Spalten einzustellen und somit saubere und organisierte Layouts zu erstellen. Lass uns diese Eigenschaften genauer ansehen.

Die Eigenschaft grid-gap (kurz gap) definiert den allgemeinen Abstand zwischen den Zeilen und Spalten im Grid. Diese Eigenschaft ist eine Kurzschreibweise für grid-row-gap und grid-column-gap.

Syntax:

    
      .grid-container {
        grid-gap: value;
      }
    
  

Wo:

• value: der Abstand zwischen den Zeilen und Spalten. Kann in verschiedenen Maßeinheiten angegeben werden (px, %, fr, auto usw.)

Beispiel 1: Einheitlicher Wert für Zeilen und Spalten

In diesem Beispiel wird der Abstand von 20px sowohl für die Zeilen als auch die Spalten übernommen:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        grid-gap: 20px; /* Abstand von 20px zwischen allen Zeilen und Spalten */
      }
    
  

Beispiel 2: Unterschiedliche Werte für Zeilen und Spalten

In diesem Beispiel werden zwei Werte verwendet: der erste (10px) für die Zeilen, der zweite (20px) für die Spalten:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        grid-gap: 10px 20px; /* 10px zwischen den Zeilen, 20px zwischen den Spalten */
      }
    
  

6.2 Die Eigenschaft grid-row-gap

Die Eigenschaft grid-row-gap bestimmt den Abstand zwischen den Zeilen im Grid. Dies ermöglicht es, einen eigenen Wert für den Zwischenraum zwischen den Zeilen anzugeben, unabhängig von den Spalten.

Syntax:

    
      .grid-container {
        grid-row-gap: value;
      }
    
  

Wo:

Beispiel 1: Festlegung eines festen Zwischenraums zwischen den Zeilen

In diesem Beispiel beträgt der Abstand zwischen den Zeilen 15px:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        grid-row-gap: 15px; /* Abstand von 15px zwischen den Zeilen */
      }
    
  

Beispiel 2: Verwendung von Prozenten für den Zwischenraum

In diesem Beispiel beträgt der Abstand zwischen den Zeilen 5% der Zeilenhöhe:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        grid-row-gap: 5%; /* Abstand von 5% der Zeilenhöhe */
      }
    
  

6.3 Die Eigenschaft grid-column-gap

Die Eigenschaft grid-column-gap definiert den Abstand zwischen den Spalten im Grid. Das ermöglicht es, einen eigenen Wert für den Zwischenraum zwischen den Spalten anzugeben, unabhängig von den Zeilen.

Syntax:

    
      .grid-container {
        grid-column-gap: value;
      }
    
  

Wo:

• value: der Abstand zwischen den Spalten. Kann in verschiedenen Maßeinheiten angegeben werden

Beispiel 1: Festlegung eines festen Zwischenraums zwischen den Spalten

In diesem Beispiel beträgt der Abstand zwischen den Spalten 25px:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        grid-column-gap: 25px; /* Abstand von 25px zwischen den Spalten */
      }
    
  

Beispiel 2: Verwendung von em für den Zwischenraum

In diesem Beispiel beträgt der Abstand zwischen den Spalten 2em:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        grid-column-gap: 2em; /* Abstand von 2em zwischen den Spalten */
      }
    
  

6.4 Kombinierte Nutzung von grid-row-gap und grid-column-gap

Du kannst die Eigenschaften grid-row-gap und grid-column-gap kombinieren, um den Zwischenraum zwischen Zeilen und Spalten genauer zu steuern.

Beispiel der vollständigen Implementierung:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Drei gleich breite Spalten */
        grid-template-rows: repeat(3, 100px); /* Drei Zeilen mit fester Höhe */
        grid-row-gap: 15px; /* Abstand von 15px zwischen den Zeilen */
        grid-column-gap: 25px; /* Abstand von 25px zwischen den Spalten */
      }

      .grid-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
        text-align: center;
        border: 1px solid #fff;
      }
    
  

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Beispiel zur Verwendung von grid-gap, grid-row-gap und grid-column-gap</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="grid-item item1">Element 1</div>
            <div class="grid-item item2">Element 2</div>
            <div class="grid-item item3">Element 3</div>
            <div class="grid-item item4">Element 4</div>
            <div class="grid-item item5">Element 5</div>
            <div class="grid-item item6">Element 6</div>
          </div>
        </body>
      </html>
    
  

Erklärung des Codes:

• .grid-container: erstellt einen Grid-Container mit drei gleich breiten Spalten und drei Zeilen mit fester Höhe. Nutzt die Eigenschaften grid-row-gap und grid-column-gap, um die Abstände zwischen Zeilen und Spalten einzustellen
• .grid-item: definiert Basisstile für die Grid-Elemente, wie Hintergrundfarbe, Textfarbe, Abstände, Textzentrierung und Rahmen

1

Aufgabe

Frontend SELF DE, Level 28, Lektion 0

Gesperrt

Gleichmäßige Abstände

Gleichmäßige Abstände

Öffnen

1

Aufgabe

Frontend SELF DE, Level 28, Lektion 0

Gesperrt

Verschiedene Abstände

Verschiedene Abstände

Öffnen