Ausrichtung des Grid Containers

8.1 Eigenschaft justify-content

CSS Grid Layout bietet mächtige Werkzeuge zur Steuerung der Ausrichtung des gesamten Grid-Containers innerhalb des verfügbaren Raums. Die Eigenschaften justify-content, align-content und place-content ermöglichen es, die Ausrichtung von Reihen und Spalten innerhalb des Containers zu kontrollieren, um Flexibilität und Präzision beim Erstellen von Layouts zu bieten.

Die Eigenschaft justify-content steuert die horizontale Ausrichtung des gesamten Grids innerhalb des Containers. Diese Eigenschaft ist nützlich, wenn die Größe des Containers größer ist als die erforderliche Breite des Grids selbst.

Syntax:

    
      .grid-container {
        display: grid;
        justify-content: value;
      }
    
  

Wo: value kann folgende Werte annehmen:

• start: Das Grid am Anfang des Containers ausrichten
• end: Das Grid am Ende des Containers ausrichten
• center: Das Grid in der Mitte des Containers ausrichten
• stretch: Das Grid strecken, sodass es den gesamten Container ausfüllt
• space-around: Gleichen Raum um jedes Element herum schaffen
• space-between: Gleichen Raum zwischen den Elementen schaffen
• space-evenly: Gleichen Raum zwischen den Elementen und den Kanten des Containers schaffen

Beispiel 1: Ausrichtung am Anfang des Containers

In diesem Beispiel wird der gesamte Inhalt am linken Rand des Containers ausgerichtet:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        justify-content: start; /* Richtet den Inhalt am linken Rand des Containers aus */
      }
    
  

Beispiel 2: Zentrierung des Inhalts

In diesem Beispiel wird der gesamte Inhalt innerhalb des Containers zentriert:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        justify-content: center; /* Zentriert den Inhalt innerhalb des Containers */
      }
    
  

8.2 Eigenschaft align-content

Die Eigenschaft align-content definiert, wie der Inhalt des Grids entlang der vertikalen Achse innerhalb des Grid-Containers ausgerichtet wird. Sie ist nützlich, wenn das Grid nicht den gesamten verfügbaren vertikalen Raum ausfüllt.

Syntax:

    
      .grid-container {
        align-content: value;
      }
    
  

Wo: value — der Wert, der die vertikale Ausrichtung des Inhalts bestimmt. Mögliche Werte:

• start: Richtet den Inhalt am Anfang des Containers aus
• end: Richtet den Inhalt am Ende des Containers aus
• center: Zentriert den Inhalt innerhalb des Containers
• space-between: Platziert den Inhalt mit gleichem Abstand zwischen den Elementen
• space-around: Platziert den Inhalt mit gleichem Abstand um jedes Element herum
• space-evenly: Platziert den Inhalt mit gleichem Abstand zwischen den Elementen und den Rändern des Containers
• stretch (standardmäßig): Streckt den Inhalt, um den gesamten verfügbaren Raum auszufüllen

Beispiel 1: Ausrichtung am Anfang des Containers

In diesem Beispiel wird der gesamte Inhalt am oberen Rand des Containers ausgerichtet:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px);
        align-content: start; /* Richtet den Inhalt am oberen Rand des Containers aus */
      }
    
  

Beispiel 2: Zentrierung des Inhalts

In diesem Beispiel wird der gesamte Inhalt innerhalb des Containers zentriert:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px);
        align-content: center; /* Zentriert den Inhalt innerhalb des Containers */
      }
    
  

8.3 Eigenschaft place-content

Die Eigenschaft place-content ist eine verkürzte Schreibweise zum gleichzeitigen Setzen von Werten für justify-content und align-content.

Syntax:

    
      .grid-container {
        place-content: justify-value align-value;
      }
    
  

Wo:

• justify-value: Wert für die horizontale Ausrichtung (justify-content)
• align-value: Wert für die vertikale Ausrichtung (align-content)

Beispiel 1: Zentrierung des Inhalts horizontal und vertikal

In diesem Beispiel wird der gesamte Inhalt sowohl horizontal als auch vertikal innerhalb des Containers zentriert:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        place-content: center center; /* Zentriert den Inhalt sowohl horizontal als auch vertikal */
      }
    
  

Beispiel 2: Strecken des Inhalts über die Breite und Ausrichtung am oberen Rand

In diesem Beispiel wird der Inhalt über die Breite des Containers gestreckt und am oberen Rand ausgerichtet:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        place-content: stretch start; /* Streckt den Inhalt über die Breite und richtet ihn am oberen Rand aus */
      }
    
  

8.4 Beispiel für eine vollständige Implementierung

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px); /* Drei Spalten mit fester Breite */
        grid-template-rows: repeat(3, 100px); /* Drei Reihen mit fester Höhe */
        gap: 10px;
        place-content: center center; /* Zentriert den Inhalt horizontal und vertikal */
      }

      .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 für die Ausrichtung des Grid Containers</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>
    
  

Codeerklärung:

• .grid-container: erstellt einen Grid-Container mit drei Spalten fester Breite und drei Reihen fester Höhe. Verwendet die Eigenschaft place-content, um den Inhalt horizontal und vertikal zu zentrieren.
• .grid-item: definiert grundlegende Stile für die Grid-Elemente wie Hintergrundfarbe, Textfarbe, Abstände, Textausrichtung und Rahmen.