XY Gridとは V6.4から導入されたXYグリッドを使いこなす方法

foundation6 XY Gridイメージです XY Grid

Foundation V6.4から導入された「XY Grid」。従来の、「Float Grid」、「Flex Grid」をLegacyとして脇へ追いやるほどの高機能な上、多機能のグリッドシステムのようです。

しかし、その詳細はWebセミナーに勧誘されるばかりで、全くわかりません。ページを見てみるものの、様々な機能が英語で羅列されているだけで、読んでいてもだんだんクラクラしてきます。

とりあえず全体を俯瞰したいと思い、XY GridのページをGoogle翻訳に日本語化してもらいました。ほとんど直さずに、訳したままペーストしています。

注)以下は、下記のベージをGoogle翻訳で翻訳したものです。翻訳の正確性は保証いたしかねます。また、日本語訳を参照した結果起こった事象については、当方は一切責任を負いかねます。あくまでも自己の責任においてご利用ください。

http://foundation.zurb.com/sites/docs/xy-grid.html

生成されるグリッドの図は省略していますので、本家のページと見比べてください。

XY Grid

マージングリッド、パディンググリッド、フレームグリッド、ブロックグリッド、垂直グリッドを含む複数のグリッドタイプのすべての種類を組み込んだv6.4の完全に再加工された新しいグリッドシステム。

XYグリッドは、グリッドの大きな進歩です。 最新のWebセミナートレーニングで、Foundation 6.4の新機能をすべてご利用ください。 複雑なレイアウトをより速く、少ないコードで作成するために、XYグリッドの機能を知ることができます。 すべての便利なUIコンポーネントとFoundation JavaScriptを学ぶことはもちろんです。 あなたは同僚を嫉妬させるでしょう。

今後のFoundationのトレーニングを逃してはいけません→

XY Grid Basics

XYグリッドは、標準の’Float Grid’と非常によく似ていますが、水平と垂直の配置、自動サイジング、完全な垂直グリッドなど、Flexboxでのみ可能な多くの便利な機能が含まれています。


Browser support

XYグリッドはChrome、Firefox、Safari 6+、IE10 +、iOS 7+、Android 4.4+でサポートされています。 FlexboxはAndroid 2ではサポートされていますが、このグリッドでの使用には信頼性がありません。 (Flexboxのブラウザーサポートを参照してください)純粋に最先端のブラウザーをサポートしているプロジェクトでは、XYグリッドのみを使用することをお勧めします。


Importing

CSSバージョンのFoundationを使用している場合は、Flexboxモードを有効にしてFoundationのカスタムダウンロードを生成できます。

メモfoundation-xy-grid-classesは、個々のグリッドコンポーネントを有効または無効にする引数を受け入れます。これらのクラスの出力を無効にするには、単に引数をfalseに設定します。これらは:


Basics

XYグリッドの構造は、.grid-x.grid-y、および.cellをベースとして使用します。ガーターのタイプを定義しないと、セルはガーターがなくてもスペースを分割します。


Gutters

XYグリッドの特徴は、marginとpaddingグリッドを調和させることです。グリッドタイプを定義するには、単にグリッド上に.grid-margin-xまたは.grid-padding-xを設定します。


Grid Container

グリッドのデフォルトは、使用可能なスペースの全幅です。それを含めるには、grid-containerクラスを使用します。コンテナは中央に配置され、$grid-container-padding設定の半分に等しい左右のパディングと共に、$grid-container設定(デフォルトでは1200px)に等しい最大幅を持ちます。

Grid Container Fluid

利用可能なスペースの全幅にコンテンツをストレッチするには、fluidgrid-containerに追加するだけです。

Grid Container Full

利用可能なスペースの全幅にコンテンツをストレッチし、グリッドコンテナのパディングを削除するには、grid-containerにクラスfullを追加するだけです。このバリエーションは主にgrid-margin-xでの使用のためのものです。grid-padding-xでも動作しますが、.grid-container.fluidと同じように動作します。

fullクラスのgrid-containergrid-margin-xを使用している場合は、コンテンツがビューポートの側面に触れる場合に正しく動作するように、水平オーバーフローを非表示にする必要があります。

これを行う最善の方法は次のとおりです。body {overflow-x:hidden;}


Auto Sizing

.autoまたは.[size]-autoクラスがセルに追加されると、残りの領域が占有されます。


複数の拡張セルは、残りのスペースを均等に共有します。


.shrinkまたは.[size]-shrinkクラスを追加することで、セルを縮小することもできます。つまり、コンテンツに必要な領域だけを占有します。


Responsive Adjustments

パーセンテージまたはシュリンクの動作から自動的な動作に戻るには、.[size]-autoまたは.[size]-shrinkというクラスを使用します。下の例では、セルは小さな画面に積み重なり、大きな画面では均一な幅になります。


Collapse Cells

.[size]-[gutter-type]-collapseクラスを使うと、セルのガーターを削除できます。

各メディアクエリーを崩壊させたくない場合があります。この場合、必要なメディアクエリサイズを使用して折り畳んで、グリッド要素に追加します。例は、smallではガーターを表示し、medium以上ではガーターを表示しない。


Offsets

オフセットは、margin-left(または垂直グリッドのmargin-top)をグリッドに適用することによって機能します。


Block Grids

個々のセルレベルではなく、direction-level内のセル幅を定義するには、.[size]-up-[n]grid-xまたはgrid-yに追加します。ここで[n]は方向ごとに表示するセルの数、[size]はエフェクトを適用するブレークポイントです。

この例ではpaddingグリッドを使用していますが、marginグリッドでも使用できます。


Source Ordering AKA (Push and Pull)

プッシュ&プルはハックの解決策であり、フロートベースのグリッドにのみ必要でした。しかし、フレックスボックスの場合、ソースの順序付けはこれを簡単に行うので、このハックは必要ありません。


Vertical Grids

XYグリッドは垂直グリッドもサポートしています。単に.grid-xの代わりに.grid-yを適用するだけです。内部セルは自動的にシフトして水平方向ではなく垂直方向に間隔を空けます。

マージンやパディングを.grid-margin-y.grid-padding-yで適用して、セルの上下にスペーシングを適用することもできます。

垂直グリッドが機能するため、グリッドは高さが必要です。グリッドフレームを使用して100個の垂直高さグリッド(またはネストされている場合は100%の高さ)を作成することもできます。


Grid Frame

XYグリッドにはFoundation for Appsのグリッドフレームと他の多くの便利な機能が組み込まれています。まず、グリッドに.grid-frameを追加します。グリッドを100vh(ブラウザウィンドウの高さ)に設定します。

.grid-margin-xまたは.grid-margin-y.grid-frameで使用する場合は、bodyのオーバーフローを:body {overflow:hidden;}のように隠す必要があります。


Building Semantically

XYグリッドCSSは強力なSassミックスインセットで生成され、独自のコードでセマンティックグリッドを構築できます。

Grid Container

グリッドコンテナを作成するには、xy-grid-container()mixinを使用します。 これは$grid-containerで指定された幅のグリッドを含んでいます。


Grids

グリッドを作成するには、xy-grid()ミックスインを使用します。


Gutters

アイテムにガーターを追加するには、xy-gutters()mixinを使用します。xy-cellmixinはガーターを出力するために使いましたが、これを使って好きなものにレスポンシブなガーターを追加することができます。 これは、ガーターをどこに配置するかを指定できるので、特に強力です:


Cells

xy-cell()mixinを使用してセルを作成します。セルのサイズを定義するにはいくつかの方法があります。xy-cellは、full(全幅)、auto(自動幅)、shrink(必要なスペースのみを占有)など、いくつかの異なるキーワードと特定のサイズを受け入れます。

セルサイズ計算機には、関数としてアクセスすることもできます。これにより、グリッドセルCSSなしでパーセンテージ値が得られます。


Responsive Grids

breakpoint()mixinとxy-cellを組み合わせて、グリッドをレスポンシブにします。それぞれのmixinがどのように動作するか、そして利用可能な引数については、以下のSassのドキュメントを参照してください。

同じCSSを出力する上記のための簡略オプションもあります:

Custom Block Grid

独自のブロックグリッドを作成するには、xy-grid-layout()mixinを使用します。デフォルトでは、mixinは2つのパラメータをとります:

  • 列数
  • 子セレクタ

引数の完全なリストについては、以下のSassのドキュメントを参照してください。

例えば:

以下のCSSを出力します:


Sass Reference

Variables

このコンポーネントのデフォルトのスタイルは、プロジェクトの設定ファイルでこれらのSass変数を使用してカスタマイズできます。

コメント