CodeGym/Kurse/Frontend SELF DE/Automatische Platzierung

Automatische Platzierung

Verfügbar

5.1 Eigenschaft grid-auto-rows

CSS Grid Layout bietet großartige Werkzeuge zur automatischen Anordnung von Elementen im Grid. Die Eigenschaften grid-auto-rows, grid-auto-columns und grid-auto-flow helfen beim Verwalten des Verhaltens von Elementen, die nicht explizit im Grid platziert sind. Schauen wir uns diese Eigenschaften genauer an.

Die Eigenschaft grid-auto-rows legt die Höhe der Zeilen fest, die automatisch hinzugefügt werden, wenn Elemente über die explizit definierten Zeilen hinausgehen.

Syntax:

.grid-container {
  grid-auto-rows: value;
}

Wo:

  • value: Höhe der automatisch hinzugefügten Zeilen. Kann in verschiedenen Maßeinheiten angegeben werden (px, %, fr, auto, etc.)

Beispiel 1: Feste Zeilenhöhe

In diesem Beispiel haben alle automatisch hinzugefügten Zeilen eine feste Höhe von 100px:

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Drei Spalten mit gleicher Breite */
  grid-auto-rows: 100px; /* Automatisch hinzugefügte Zeilen sind 100px hoch */
}

Beispiel 2: Flexible Zeilenhöhe

In diesem Beispiel haben die automatisch hinzugefügten Zeilen eine Mindesthöhe von 100px, können aber bei Bedarf vergrößert werden:

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto); /* Mindesthöhe der Zeilen 100px, kann automatisch vergrößert werden */
}

5.2 Eigenschaft grid-auto-columns

Die Eigenschaft grid-auto-columns legt die Breite der Spalten fest, die automatisch hinzugefügt werden, wenn Elemente über die explizit definierten Spalten hinausgehen.

Syntax:

.grid-container {
  grid-auto-columns: value;
}

Wo:

  • value: Breite der automatisch hinzugefügten Spalten. Kann in verschiedenen Maßeinheiten angegeben werden (px, %, fr, auto, etc.)

Beispiel 1: Feste Spaltenbreite

In diesem Beispiel haben alle automatisch hinzugefügten Spalten eine feste Breite von 100px:

CSS
.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 100px); /* Drei Zeilen mit fester Höhe */
  grid-auto-columns: 100px; /* Automatisch hinzugefügte Spalten sind 100px breit */
}

Beispiel 2: Flexible Spaltenbreite

In diesem Beispiel haben die automatisch hinzugefügten Spalten eine Mindestbreite von 100px, können sich aber bis zu einem Teil des freien Raums vergrößern:

CSS
.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-auto-columns: minmax(100px, 1fr); /* Mindestbreite der Spalten 100px, kann bis zu einem Teil des freien Raums vergrößert werden */
}

5.3 Eigenschaft grid-auto-flow

Die Eigenschaft grid-auto-flow bestimmt, wie automatisch Elemente im Grid platziert werden sollen, die nicht explizit mit den Eigenschaften grid-row und grid-column angegeben sind.

Syntax:

.grid-container {
  grid-auto-flow: value;
}

Wo:

value: Der Wert, der die Platzierungsreihenfolge der Elemente bestimmt. Mögliche Werte:

  • row (standardmäßig): Elemente werden in Zeilen platziert
  • column: Elemente werden in Spalten platziert
  • dense: Elemente werden dicht gepackt platziert, ohne leere Zellen (wird zusammen mit row oder column verwendet)

Beispiel 1: Platzierung in Zeilen

In diesem Beispiel werden die Elemente in Zeilen platziert, indem sie eine Zeile nach der anderen füllen:

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row; /* Elemente werden in Zeilen platziert */
}

Beispiel 2: Platzierung in Spalten

In diesem Beispiel werden die Elemente in Spalten platziert, indem sie eine Spalte nach der anderen füllen:

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column; /* Elemente werden in Spalten platziert */
}

Beispiel 3: Dichtes Packen

In diesem Beispiel werden die Elemente in Zeilen mit dichtem Packen angeordnet, was die Anzahl leerer Zellen minimiert:

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense; /* Elemente werden in Zeilen mit dichtem Packen angeordnet */
}

5.4 Beispiel einer vollständigen Implementierung

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Drei Spalten mit gleicher Breite */
  grid-auto-rows: 100px; /* Automatisch hinzugefügte Zeilen sind 100px hoch */
  grid-auto-flow: row dense; /* Elemente werden in Zeilen mit dichtem Packen angeordnet */
  gap: 10px;
}

.grid-item {
  background-color: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
  border: 1px solid #fff;
}
HTML
<!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 automatische Elementplatzierung in CSS Grid</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 class="grid-item">Element 5</div>
      <div class="grid-item">Element 6</div>
    </div>
  </body>
</html>

Code-Erklärung:

  • .grid-container: Erstellt einen Grid-Container mit drei Spalten gleicher Breite und automatischen Zeilen von 100px Höhe. Die Elemente werden in Zeilen mit dichtem Packen angeordnet
  • .grid-item: Definiert die grundlegenden Stile für die Grid-Elemente, wie Hintergrundfarbe, Textfarbe, Innenabstand, Textausrichtung und Rahmen
1
Aufgabe
Frontend SELF DE,  Level 27Lektion 4
Gesperrt
Flexible auto-Spalten
Flexible auto-Spalten
1
Aufgabe
Frontend SELF DE,  Level 27Lektion 4
Gesperrt
Auto-Anordnung nach Spalten
Auto-Anordnung nach Spalten
Kommentare
  • Beliebt
  • Neu
  • Alt
Du musst angemeldet sein, um einen Kommentar schreiben zu können
Auf dieser Seite gibt es noch keine Kommentare