CSS
Gitter

Einführung

Bemerkungen

Basisbeispiel

Das CSS-Grid ist als Anzeigeeigenschaft definiert. Es gilt nur für ein übergeordnetes Element und dessen unmittelbar untergeordnete Elemente.

Betrachten Sie das folgende Markup:

<section class="container">
  <div class="item1">item1</div>
  <div class="item2">item2</div>
  <div class="item3">item3</div>
  <div class="item4">item4</div>
</section>

Die einfachste Möglichkeit, die Markup-Struktur oben als Gitter zu definieren, besteht darin, die display einfach auf grid :

.container {
  display: grid;   
}

Dies führt jedoch immer dazu, dass alle untergeordneten Elemente übereinander kollabieren. Dies liegt daran, dass die Kinder derzeit nicht wissen, wie sie sich innerhalb des Gitters positionieren sollen. Aber wir können es ihnen explizit sagen.

Zuerst müssen wir das Gitterelement sagen .container , wie viele Zeilen und Spalten wird seine Struktur bilden und wir können dies die Verwendung tun grid-columns und grid-rows Eigenschaften ( man beachte die Pluralisierung):

.container {
  display: grid;
  grid-columns: 50px 50px 50px;
  grid-rows: 50px 50px;
}

Das hilft uns aber immer noch nicht viel, da wir jedem untergeordneten Element eine Reihenfolge geben müssen. Wir können dies tun, indem wir die Werte der grid-row und grid-column , die angeben, wo sie sich im Raster befinden:

.container .item1 {
  grid-column: 1;
  grid-row: 1;
}
.container .item2 {
  grid-column: 2;
  grid-row: 1;
}
.container .item3 {
  grid-column: 1;
  grid-row: 2;
}
.container .item4 {
  grid-column: 2;
  grid-row: 2;
}

Indem jedem Artikel ein Spalten- und Zeilenwert zugewiesen wird, wird die Artikelreihenfolge innerhalb des Containers angegeben.

Sehen Sie sich ein Arbeitsbeispiel auf JSFiddle an . Sie müssen dies in IE10, IE11 oder Edge anzeigen, damit es funktioniert, da dies derzeit die einzigen Browser sind, die Grid Layout (mit dem Herstellerpräfix -ms- ) unterstützen, oder ein Flag in Chrome, Opera und Firefox entsprechend der caniuse aktivieren mit ihnen testen.