Grid-Grundlagen

Teil des Abschnitts CSS-Meisterschaft der HTML-Journey von Coddy. Lektion 31 von 43.

CSS Grid ist ein Layoutsystem, mit dem du ganz einfach Webseiten mit Zeilen und Spalten erstellen kannst. Es eignet sich hervorragend zum Erstellen komplexer und responsiver Layouts, ohne Floats oder knifflige Positionierungen zu benötigen. Außerdem funktioniert es in allen modernen Browsern.

Um einen Grid-Container zu erstellen, verwende die Eigenschaft display:

.container {
  display: grid;
}

Definiere Spalten in deinem Raster mit grid-template-columns und px- oder fr-Einheiten (Bruchteilen):

/* Dies erzeugt drei Spalten, wobei die mittlere Spalte doppelt so viel Platz einnimmt wie die anderen beiden. */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Definiere Zeilen mit grid-template-rows. Verwende die Eigenschaft gap, um Abstand zwischen den Rasterelementen hinzuzufügen.

/* Erstellt ein Grid mit zwei Zeilen: die erste ist 100px hoch, die zweite ist 200px */
.container {
  display: grid;
  grid-template-rows: 100px 200px;
  gap: 20px;
}

Aufgabe

Einfach

Erstelle eine CSS-Regel für eine Klasse namens grid-container, die:

Die Eigenschaft display festlegt, um ein Raster zu erstellen
Drei gleich breite Spalten mithilfe der Einheit fr erstellt
Zwei Zeilen erstellt: Die erste ist 150px hoch und die zweite 250px hoch
Einen Abstand von 20px zwischen allen Rasterelementen hinzufügt

Schreibe nur den CSS-Code für die Klasse grid-container.

Probier es selbst

<!DOCTYPE html>
<html>
<head>
    <style>
        .item{
            border: 2px solid black;
            background-color: #82f5d0;
        }
     /* Add your CSS code here: */
    
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>
</html>