Ionic Grid

Ionics Grid unterscheidet sich von den meisten anderen Frameworks; es verwendet das Flexible-Box-Modell. Außerdem wird es auf Mobilgeräten von fast allen Telefonen unterstützt. Die Klasse `row` legt Zeilen fest, und die Klasse `col` legt Spalten fest.

Raster mit gleicher Größe

Wenn ein Element mit der `row`-Klasse `col`-Klassen enthält, werden die Spalten auf gleiche Größe gesetzt.

Im folgenden Beispiel enthält die `row`-Klasse 5 `col`-Klassen, und jede Spalte hat eine Breite von 20%.

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Selbst ausprobieren »

Spaltenbreite angeben

Sie können unterschiedliche Größen für Spalten innerhalb einer Zeile festlegen. Standardmäßig werden Spalten in gleiche Größen unterteilt. Sie können Spaltenbreiten aber auch prozentual festlegen (eine Zeile ist in 12 Raster unterteilt).

<div class="row">
  <div class="col col-50">.col.col-50</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-75">.col.col-75</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col col-75">.col.col-75</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Selbst ausprobieren »

Hinweis: Im Beispiel fügt jede `col`-Klasse automatisch einen Rahmen und einen grauen Hintergrund hinzu.

Nachfolgend finden Sie einige prozentuale Klassennamen zur Angabe der Spaltenbreite:

.col-10	10%
.col-20	20%
.col-25	25%
.col-33	33.3333%
.col-50	50%
.col-67	66.6666%
.col-75	75%
.col-80	80%
.col-90	90%

Raster mit Versätzen

Spalten können einen linken Versatz haben, wie im folgenden Beispiel gezeigt:

<div class="row">
  <div class="col col-33 col-offset-33">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-33">.col</div>
  <div class="col col-33 col-offset-33">.col</div>
</div>

<div class="row">
  <div class="col col-33 col-offset-67">.col</div>
</div>

Selbst ausprobieren »

Nachfolgend sind einige Klassennamen für prozentuale Versätze aufgeführt:

.col-offset-10	10%
.col-offset-20	20%
.col-offset-25	25%
.col-offset-33	33.3333%
.col-offset-50	50%
.col-offset-67	66.6666%
.col-offset-75	75%
.col-offset-80	80%
.col-offset-90	90%

---

Vertikale Ausrichtung im Grid

Das Flexbox-Modell erleichtert das Festlegen der vertikalen Ausrichtung für Spalten. Die vertikale Ausrichtung umfasst oben, mittig und unten und kann auf alle Spalten in einer Zeile oder auf bestimmte Spalten angewendet werden.

Im Beispiel hat die letzte Spalte den höchsten Inhalt, um die vertikale Ausrichtung besser zu veranschaulichen.

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row">
  <div class="col col-top">.col</div>
  <div class="col col-center">.col</div>
  <div class="col col-bottom">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-top">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-center">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-bottom">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

Selbst ausprobieren »

---

Responsives Grid

Wenn sich die Bildschirmausrichtung von Mobilgeräten ändert, z. B. Querformat oder Hochformat, muss sich das Grid in jeder Zeile an unterschiedliche Breiten anpassen können.

Die responsiven Klassen für verschiedene Geräte sind wie folgt:

Responsive Klassen	Beschreibung
.responsive-sm	Kleiner als Telefon im Querformat
.responsive-md	Weniger als Tablet-Hochformat
.responsive-lg	Weniger als Tablet-Querformat

<div class="row responsive-sm">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Selbst ausprobieren »

Andere Erweiterungen