Grid

Ein CSS-Grid wird mit dem grid-Wert der display-Eigenschaft definiert; Sie können Spalten und Zeilen in Ihrem Grid mit den Eigenschaften grid-template-rows und grid-template-columns festlegen.

Das mit diesen Eigenschaften definierte Grid wird als explizites Grid beschrieben.

Wenn Sie Inhalte außerhalb dieser expliziten Grid platzieren oder wenn Sie auf die automatische Platzierung angewiesen sind und der Grid-Algorithmus zusätzliche Zeilen- oder Spuren tracks erstellen muss, um Grid-Zellen zu halten, dann werden zusätzliche Spuren im impliziten Grid erstellt. Das implizite Grid ist das Grid, das automatisch entsteht, weil Inhalte außerhalb der definierten Spuren hinzugefügt werden.

Im untenstehenden Beispiel habe ich ein explizites Grid mit drei Spalten und zwei Zeilen erstellt. Die dritte Zeile im Grid ist eine implizite Grid-Zeilenspur, die entsteht, weil es mehr als sechs Elemente gibt, die die expliziten Spuren füllen.

Beispiel

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

css

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}

html

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
</div>

Siehe auch

Grundkonzepte des Grid-Layouts
Eigenschaftsreferenz:

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden