Foundation 4 のグリッド システムは、モバイル ファーストのアプローチを採用しており、既に他の基盤要素を使用している場合 (テキスト コンテンツであろうと、メインのようなページ上の画像/コンテンツの一般的なレイアウトであろうと)、ページのレイアウトをスタイリングすることに関しては簡単です。コンテンツとサイドバー)。
次のサンプル ページでは、グリッドとネストされたグリッドを使用して灰色の四角形が作成されています。
次のような要素とサブ要素 (前の画像の中央にある個々の灰色のボックスなど) で構成される "表形式のデータ" を設計することがよくあります。
コントロールなどの一部の要素は位置合わせする必要があり、要素をクリックすると、項目に関するより詳細な情報を含むドロップダウン メニューが表示されます。
私はモックアップ段階でこの種の要素にグリッド システムをよく使用します。配置をアーカイブしてさまざまな幅を試すのは簡単だからです。また、多くのグリッド固有のマークアップが生成され、HTML コードが読みにくく、理解しにくくなっています。
私の質問は次のとおりです。デザインでこの種の詳細に基礎グリッドを使用していますか? そうでない場合、複数の要素を同じ行に異なる配置で配置し、特定の要素を互いに配置するためのお気に入りの方法は何ですか (単純な divハードコーディングされた幅? display: table? 何か他のもの?)。
この種の表示を可能にする新しい CSS3フレックスボックスモジュールがあることは知っていますが、デザインでこのレベルの詳細をスタイリングする方法というよりも、基本的なグリッド システムの置き換えのように見えます。