Stiftung Grid Beispiele

Im Folgenden haben wir einige Beispiele für gemeinsame Raster gesammelt.

Drei gleiche Spalten

Dieses Beispiel zeigt, wie drei gleiche Spalten zu erstellen (33,3% / 33,3% / 33,3%), zeigt drei Säulen auf der mittleren und Großgeräte, automatische Stapel auf kleinen Geräten:

Drei ungleiche Spalte

Dieses Beispiel zeigt, wie drei ungleiche Spalte (25% / 50% / 25%) zu schaffen, zeigt drei Säulen auf der mittleren und Großgeräte, automatische Stapel auf kleinen Geräten:

Zwei gleiche Spalten

Dieses Beispiel zeigt, wie zwei gleiche Spalten zu schaffen (50% / 50%), der Anteil der kleinen, mittleren und großen Anlagen ist stets über 50% / 50%:

Zwei ungleiche Spalten

Dieses Beispiel zeigt, wie zwei ungleiche Spalten zu erzeugen (33,3% / 66,6%), der Anteil der kleinen, mittleren und großen Anlagen immer über 33,3% / 66,6%:

Ändern Sie die Reihenfolge der Spalten

Durch die Verwendung von .small|medium|large-push-* und .small|medium|large-pull-* Klasse , um die Reihenfolge der Spalten zu ändern:

Verschachtelte Spalte

Sie können verschachtelte Gitter (Spalte einfügen Spalte) verwenden:

Mixed: Mobile, Desktop,

Stiftung Grid - System besteht aus drei Säulen: .small-* (Handy), .medium-* (flach), und .large-* (Desktop). Diese Klassen können dynamisch in Kombination verwendet werden, machen das Layout flexibler:

Tipp: Jede Klasse kann vergrößert werden, wenn Sie die Breite des kleinen und großen Bildschirm - Gerät wollen , können wie angegeben eingestellt werden .small-* .

Mixed: Handy, Tablet und Desktop-Geräte

Die mittlere Spalte

Sie können die Mittelsäule verwenden .small-centered Klasse. Mittlere und große Anlagen können kleine Geräte zentriert vererbt werden, aber Sie müssen die Klasse festgelegt ist zentriert auf große Ausrüstung .large-centered .

Spalte Offset

Sie können mit .large-offset-* (oder .small-offset-* ) Klasse, stellen Sie die Spalte auf der rechten Seite . Die Anzahl der Spalten am linken Rand der Kontrolle einen Stern:

Unvollständige Spalte

Wenn die Spaltennummer der Reihe und nicht mehr als 12, Foundation wird automatisch die letzte auf der rechten Seite Schwimmer sein, und eine leere in den verbleibenden Spalten zu füllen.

Optionen .end Element Kategorie für das letzte Satz nach links float:

Mit großem Bildschirm

Grid ( .row ) Maximale Größe (max-width) ist 62.5rem. Auf großem Bildschirm kann Größe als 62.5rem größer sein, wird diese Spalte nicht vollständig füllen kann die Seite, selbst wenn die Breite auf 100% gesetzt wird. Aber wir können einen neuen max-width über CSS gesetzt:

Wenn Sie die Standard max-width verwenden möchten, aber die Hintergrundfarbe der inter gesamte Seite, dann verwenden Sie auf das Containerelement .row Klasse, und Sie benötigen eine Hintergrundfarbe angeben: