0

ファウンデーション 6 の新しいフレックス グリッドを使用することにしましたが、ブロック グリッドで取得していたように意図した動作が得られないことに気付きました。

これは HTML であり、両方のインスタンスで使用されている同じコードです。

<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>

Flex GridとBlock Gridを使ってみた

Block Grid リンクの結果を Flex Grid で取得したいのですが、可能ですか?

F6のドキュメントを調べましたが、適切な解決策が見つかりませんでした（少なくとも私が見つけたものから）。

ありがとうございました！

4

1 に答える 1

1

Foundation の Flex Grid 内でブロック グリッドを使用できます。フレックス グリッドは、標準の Foundation Grid を完全に置き換えるものであることを認識しておく必要があります。また、Flex Grid と Block Grid はまったく別のものです。Flex Grid は、グリッド システム全体 (行、列など) を引き継ぎます。ブロック グリッドは、同じ数の列を複数または単一の行に分散する単純な方法です。

これはおそらくあなたが探しているものです：

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

これが、Flex Grid 内で Block Grid を使用する方法です。

Flex Grid も有効になっていることを確認する必要があります。

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

于 2016-11-17T19:50:02.810 に答える