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;
}

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

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.

Spickzettel

CSS Grid ist ein Layout-System zur Erstellung von Webseiten mit Zeilen und Spalten. Um einen Grid-Container zu erstellen, verwenden Sie display: grid:

.container {
  display: grid;
}

Definieren Sie Spalten mit grid-template-columns unter Verwendung von px- oder fr-Einheiten (Bruchteile):

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Drei Spalten, die mittlere ist doppelt so breit */
}

Definieren Sie Zeilen mit grid-template-rows und fügen Sie Abstände mit gap hinzu:

.container {
  display: grid;
  grid-template-rows: 100px 200px; /* Zwei Zeilen mit spezifischen Höhen */
  gap: 20px; /* Abstand zwischen Grid-Elementen */
}

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>

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.