Definition von Zeilen und Spalten

3.1 Eigenschaft grid-template-columns

CSS Grid Layout ermöglicht die Erstellung komplexer Layouts für Webseiten mit Zeilen und Spalten. Zwei wichtige Eigenschaften zur Definition der Grid-Struktur sind grid-template-rows und grid-template-columns. Diese Eigenschaften erlauben es, die Anzahl und die Größen von Zeilen und Spalten im Grid-Container festzulegen, was den Entwicklern volle Kontrolle über das Layout der Elemente gibt.

Die Eigenschaft grid-template-columns definiert die Anzahl und die Größen der Spalten im Grid. Sie nimmt ein oder mehrere Werte an, die in verschiedenen Maßeinheiten angegeben werden können, wie Pixel (px), Prozente (%), Flex-Einheiten (fr) und andere.

Beispiel 1: Festlegen fester Spaltengrößen

In diesem Beispiel besteht das Grid aus drei Spalten. Die erste Spalte ist 100px breit, die zweite Spalte ist 200px breit, die dritte Spalte ist 100px breit:

    
      .grid-container {
        display: grid;
        grid-template-columns: 100px 200px 100px; /* Drei Spalten mit festen Größen */
      }
    
  

Beispiel 2: Verwendung von Flex-Einheiten (fr)

In diesem Beispiel besteht das Grid aus drei Spalten. Die erste und die dritte Spalte nehmen jeweils den gleichen Platz ein, und die zweite Spalte ist doppelt so breit wie jede von ihnen:

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr; /* Drei Spalten mit flexiblen Größen */
      }
    
  

Beispiel 3: Verwendung von Wiederholung (repeat)

In diesem Beispiel wird die Funktion repeat verwendet, um die Syntax zu vereinfachen. Das Grid besteht aus drei gleichbreiten Spalten:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Drei gleiche Spalten */
      }
    
  

Beispiel 4: Festlegen von Mindest- und Höchstgrößen (minmax)

In diesem Beispiel hat jede der drei Spalten eine Mindestbreite von 100px und eine flexible Größe, die sich je nach verfügbarem Platz auf bis zu 1fr erhöhen kann:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, minmax(100px, 1fr)); /* Drei Spalten mit Mindestbreite von 100px und flexiblen Größen */
      }
    
  

3.2 Eigenschaft grid-template-rows

Die Eigenschaft grid-template-rows ist ähnlich wie grid-template-columns, jedoch definiert sie die Anzahl und die Größen der Zeilen im Grid. Auch sie nimmt ein oder mehrere Werte an, die in verschiedenen Maßeinheiten angegeben werden können.

Beispiel 1: Festlegen fester Zeilengrößen

In diesem Beispiel besteht das Grid aus drei Zeilen. Die erste Zeile hat eine Höhe von 50px, die zweite Zeile eine Höhe von 100px, die dritte Zeile eine Höhe von 50px:

    
      .grid-container {
        display: grid;
        grid-template-rows: 50px 100px 50px; /* Drei Zeilen mit festen Größen */
      }
    
  

Beispiel 2: Verwendung von Flex-Einheiten (fr)

In diesem Beispiel besteht das Grid aus drei Zeilen. Die erste und die dritte Zeile nehmen jeweils den gleichen Platz ein, und die zweite Zeile ist doppelt so hoch wie jede von ihnen:

    
      .grid-container {
        display: grid;
        grid-template-rows: 1fr 2fr 1fr; /* Drei Zeilen mit flexiblen Größen */
      }
    
  

Beispiel 3: Verwendung von Wiederholung (repeat)

In diesem Beispiel wird die Funktion repeat verwendet, um die Syntax zu vereinfachen. Das Grid besteht aus drei gleichhohen Zeilen:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 1fr); /* Drei gleiche Zeilen */
      }
    
  

Beispiel 4: Festlegen von Mindest- und Höchstgrößen (minmax)

In diesem Beispiel hat jede der drei Zeilen eine Mindesthöhe von 50px und eine flexible Größe, die sich je nach verfügbarem Platz auf bis zu 1fr erhöhen kann:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, minmax(50px, 1fr)); /* Drei Zeilen mit Mindesthöhe von 50px und flexiblen Größen */
      }
    
  

3.3 Kombination der Eigenschaften

Kombination der Eigenschaften grid-template-rows und grid-template-columns

Diese Eigenschaften können zusammen verwendet werden, um komplexe Grids mit verschiedenen Zeilen- und Spaltengrößen zu erstellen.

In diesem Beispiel besteht das Grid aus zwei Spalten: die erste Spalte nimmt 1 Teil des verfügbaren Platzes ein, und die zweite Spalte nimmt 2 Teile ein. Das Grid besteht auch aus zwei Zeilen: die erste Zeile hat eine Höhe von 100px, die zweite Zeile eine Höhe von 200px.

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 100px 200px;
      }
    
  

Beispiel einer vollständigen Implementierung:

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 100px 200px;
        gap: 10px;
      }

      .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>CSS Grid Beispiel</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="grid-item">Element 1</div>
            <div class="grid-item">Element 2</div>
            <div class="grid-item">Element 3</div>
            <div class="grid-item">Element 4</div>
          </div>
        </body>
      </html>
    
  

Erklärung des Codes:

• .grid-container: definiert den Container als Grid-Container mit zwei Spalten und zwei Zeilen. Die Abstände zwischen den Elementen werden mit der Eigenschaft gap festgelegt
• .grid-item: legt die Basisstile für die Grid-Elemente fest, wie Hintergrundfarbe, Textfarbe, Abstände, Textzentrierung und Rahmen