/ / Foundation 6 Wie man Flex-Grid-Säulen nicht umschließt? - zub-foundation-6

Fundament 6 Wie man Flex-Gridsäule nicht umwickelt? - zub-foundation-6

Ich entschied mich für das neue Flex-Grid von Foundation 6, und mir fiel auf, dass ich nicht das beabsichtigte Verhalten bekomme, da ich mit dem Blockraster kam.

Dies ist der HTML-Code, es wird in beiden Fällen derselbe Code verwendet:

<div class="row">
<div class="small-3 column end text-center red">
column 1
</div>
<div class="small-3 column end text-center green">
column 2
</div>
<div class="small-3 column end text-center green">
column 3
</div>
<div class="small-3 column end text-center green">
column 4
</div>

<div class="small-3 column end text-center green">
column 5
</div>
<div class="small-3 column end text-center green">
column 6
</div>
<div class="small-3 column end text-center green">
column 7
</div>
<div class="small-3 column end text-center green">
column 8
</div>

<div class="small-3 column end text-center green">
column 9
</div>
<div class="small-3 column end text-center green">
column 10
</div>
<div class="small-3 column end text-center green">
column 11
</div>
<div class="small-3 column end text-center green">
column 12
</div>
</div>

Ich habe es versucht Flex-Gitter und Blockraster

Ich beabsichtige, das Ergebnis der Block-Grid-Verbindung in einem Flex-Grid zu erhalten, ist das möglich?

Ich ging durch die F6-Dokumentation, konnte aber dort keine passende Lösung finden (zumindest von dem, was ich gefunden habe).

Vielen Dank!

Antworten:

1 für die Antwort № 1

Sie können Blockraster innerhalb von Foundation's verwendenFlex-Gitter. Sie müssen erkennen, dass das Flex Grid das Standard Foundation Grid vollständig ersetzt. Auch das Flex Grid und ein Block Grid sind zwei völlig verschiedene Dinge. Flex Grid übernimmt das gesamte Rastersystem (Zeilen, Spalten ...). Ein Blockraster ist einfach ein Verfahren zum Verteilen einer gleichen Anzahl von Spalten über mehrere oder eine einzelne Zeile.

Das ist wahrscheinlich das, was Sie suchen:

https://foundation.zurb.com/sites/docs/flex-grid.html#block-grids

So verwenden Sie das Blockraster innerhalb des Flex Grids.

Sie müssen sicherstellen, dass das Flex-Grid ebenfalls aktiviert ist:

https://foundation.zurb.com/sites/docs/flex-grid.html#importing


Verwandte Fragen


Kommentare (0)

Einen Kommentar hinzufügen