Ausrichtung von Elementen im Grid

7.1 Eigenschaft justify-items

CSS Grid Layout bietet effektive Werkzeuge zur Steuerung der Ausrichtung von Elementen innerhalb des Grids. Die Eigenschaften justify-items, align-items und place-items ermöglichen es, genau anzupassen, wie Grid-Elemente innerhalb ihrer Zellen horizontal und vertikal angeordnet werden. Schauen wir uns diese Eigenschaften genauer an.

Die Eigenschaft justify-items bestimmt die horizontale Ausrichtung aller Grid-Elemente innerhalb ihrer Zellen im gesamten Grid.

Syntax:

    
      .grid-container {
        justify-items: value;
      }
    
  

Wo:

• value: Der Wert, der die horizontale Ausrichtung der Elemente bestimmt. Mögliche Werte:
  • start: richtet Elemente am Anfang der Zelle aus
  • end: richtet Elemente am Ende der Zelle aus
  • center: zentriert Elemente innerhalb der Zelle
  • stretch (standardmäßig): dehnt Elemente aus, um die gesamte Breite der Zelle auszufüllen

Beispiel 1: Ausrichtung am Anfang der Zelle

In diesem Beispiel werden alle Elemente am linken Rand ihrer Zellen ausgerichtet:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: start; /* Alle Elemente werden am Anfang der Zelle ausgerichtet */
      }
    
  

Beispiel 2: Zentrierung von Elementen

In diesem Beispiel werden alle Elemente innerhalb ihrer Zellen zentriert:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center; /* Alle Elemente werden innerhalb der Zelle zentriert */
      }
    
  

7.2 Eigenschaft align-items

Die Eigenschaft align-items bestimmt die vertikale Ausrichtung aller Grid-Elemente innerhalb ihrer Zellen im gesamten Grid.

Syntax:

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

Wo:

• value: Der Wert, der die vertikale Ausrichtung der Elemente bestimmt. Mögliche Werte:
  • start: richtet Elemente am Anfang der Zelle aus
  • end: richtet Elemente am Ende der Zelle aus
  • center: zentriert Elemente innerhalb der Zelle vertikal
  • stretch (standardmäßig): dehnt Elemente aus, um die gesamte Höhe der Zelle auszufüllen

Beispiel 1: Ausrichtung am Anfang der Zelle

In diesem Beispiel werden alle Elemente am oberen Rand ihrer Zellen ausgerichtet:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        align-items: start; /* Alle Elemente werden oben in der Zelle ausgerichtet */
      }
    
  

Beispiel 2: Zentrierung von Elementen vertikal

In diesem Beispiel werden alle Elemente vertikal innerhalb ihrer Zellen zentriert:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        align-items: center; /* Alle Elemente werden vertikal innerhalb der Zelle zentriert */
      }
    
  

7.3 Eigenschaft place-items

Die Eigenschaft place-items ist eine Kurzform, um gleichzeitig Werte für align-items und justify-items festzulegen.

Syntax:

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

Wo:

• align-value: Wert für die vertikale Ausrichtung innerhalb der Zelle (align-items)
• justify-value: Wert für die horizontale Ausrichtung innerhalb der Zelle (justify-items)

Wird ein einzelner Wert für die Eigenschaft place-items angegeben, z.B. place-items: stretch, werden die Elemente in beiden Richtungen ausgerichtet.

Beispiel 1: Zentrierung von Elementen sowohl vertikal als auch horizontal

In diesem Beispiel werden alle Elemente innerhalb ihrer Zellen sowohl horizontal als auch vertikal zentriert:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        place-items: center; /* Elemente werden sowohl horizontal als auch vertikal zentriert */
      }
    
  

Beispiel 2: Dehnung von Elementen in der Höhe und Ausrichtung am linken oberen Rand

In diesem Beispiel werden alle Elemente in der Höhe gedehnt und am linken oberen Rand ihrer Zellen ausgerichtet:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        place-items: stretch start; /* Elemente werden auf die gesamte Höhe der Zelle gedehnt und am linken oberen Rand ausgerichtet */
      }
    
  

7.4 Vollständiges Implementierungsbeispiel

Vollständiges Implementierungsbeispiel:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Drei Spalten gleicher Breite */
        grid-template-rows: repeat(3, 100px); /* Drei Zeilen fester Höhe */
        gap: 10px;
        place-items: center center; /* Zentrierung von Elementen sowohl horizontal als auch 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 Elementausrichtung in CSS Grid</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>
    
  

Code-Erklärung:

• .grid-container: Erstellt einen Grid-Container mit drei Spalten gleicher Breite und drei Zeilen fester Höhe. Verwendet die Eigenschaft place-items zur Zentrierung der Elemente sowohl horizontal als auch vertikal
• .grid-item: Definiert grundlegende Stile für die Grid-Elemente, wie Hintergrundfarbe, Textfarbe, Innenabstände, Textzentrierung und Rahmen