CSS grid layout

Das CSS Grid Layout-Modul ist hervorragend geeignet, um eine Seite in bedeutende Regionen zu unterteilen oder die Beziehung in Bezug auf Größe, Position und Schicht zwischen Teilen einer Steuerung zu definieren, die aus HTML-Primitiven aufgebaut ist.

Ähnlich wie Tabellen ermöglicht das Grid Layout einem Autor, Elemente in Spalten und Zeilen auszurichten. Mit CSS Grid sind jedoch viele weitere Layouts entweder möglich oder einfacher umzusetzen als mit Tabellen. Zum Beispiel könnten sich die Kinderelemente eines Grid-Containers so positionieren, dass sie tatsächlich überlappen und in Schichten anordnen, ähnlich wie bei CSS-positionierten Elementen.

Einfaches Beispiel

Das untenstehende Beispiel zeigt ein Grid mit drei Spalten, bei dem neue Zeilen mit mindestens 100 Pixeln und maximal "auto" erstellt werden. Elemente wurden über lineare Platzierung auf das Grid gesetzt.

HTML

html
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>

CSS

css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

Referenz

Eigenschaften

Funktionen

Datentypen

Leitfäden

Spezifikationen

Specification
CSS Grid Layout Module Level 2

Siehe auch