Grid-Grundlagen

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

CSS Grid ist ein Layout-System, mit dem Sie auf einfache Weise Webseiten mit Zeilen und Spalten erstellen können. Es eignet sich hervorragend für die Erstellung komplexer und responsiver Layouts, ohne dass Floats oder komplizierte Positionierungen erforderlich sind. Zudem funktioniert es in allen modernen Browsern.

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

.container {
  display: grid;
}

Definieren Sie Spalten in Ihrem Grid mit grid-template-columns und px- oder fr-Einheiten (Bruchteile):

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

Definieren Sie Zeilen mit grid-template-rows. Verwenden Sie die gap-Eigenschaft, um Abstände zwischen den Grid-Elementen hinzuzufügen.

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

Aufgabe

Einfach

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

die Eigenschaft display so festlegt, dass ein Grid erzeugt wird
drei gleich breite Spalten unter Verwendung der Einheit fr erstellt
zwei Zeilen erstellt: die erste 150px hoch und die zweite 250px hoch
einen Abstand von 20px zwischen allen Grid-Elementen hinzufügt

Schreiben Sie 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>