この投稿はWebflow社が提供する「Grid」の内容を元に作成しています。
引用元：https://university.webflow.com/lesson/grid-2-0
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
今回は、CSSグリッドを使用して、レスポンシブ対応したレイアウトでコンテンツを配置する方法を解説します。
レッスン概要
Webflowのグリッドレイアウトは、CSSグリッドを完全に視覚化してキャンバス上で操作可能にします。これにより、レイアウトやデザインをより任意に制御することができます。グリッドでは、グリッド内のアイテムの位置やサイズを変更することができ、レスポンシブ性の高いレイアウトを迅速に作成することができます。
グリッドを作成するには、エレメント追加パネルからグリッドエレメントを選択します。また、スタイルパネルで既存の要素にグリッドレイアウトを適用することも追加できます。
グリッドを編集するには、グリッドを選択した状態で、スタイルパネルの「Layout」の下にある「Edit Grid」をクリックします。
グリッド編集モードを終了するには、ESCキーを押すか、キャンバス上で「Done」をクリックします。
列（や行）を追加するには、キャンバス上やスタイルパネルに表示される「Columns（かRows）のとなりのプラスマーク」をクリックします。
列や行を複製または削除するには、列または行のヘッダーを右クリックし、「Duplicate」または「Delete」を選択します。
また、スタイルパネル上で任意の行や列にカーソルを合わせると、削除や複製を行うことができます。
スタイルパネルで行や列を並べ替えるには、「Edit Grid」を開き、移動させたい行や列の左端にカーソルを合わせ、マウスカーソルがハンドマークになったらドラッグして移動させます。
列と行の間の距離感は、マージンやパディングを設定することなく、Edit Gridの「Gap」から指定することができます。また、キャンバス上で列間若しくは行間をクリック＆ドラッグし調整することもできます。
グリッドの列（もしくは行）のサイズを調整するには、キャンバス上で列（もしくは行）のヘッダーを選択し、希望するサイズにドラッグします。
また、キャンバスの行や列の見出し、またはスタイルパネルに、列と行の両方とも任意のサイズ値を入力することができます。
グリッドレイアウトでは、グリッドと相性の良いサイズ単位としてFRを設定できます。FR単位は、グリッドボックス内の利用可能なスペースに対して、設けている列数（若しくは行数）でどのような割合に分割するかを示し、パーセンテージやピクセル単位のように、行や列の長さを定義するために使用します。
しかし、固定されたパーセントやピクセル単位とは異なり、FR単位は自動的に利用可能なスペースを計算し、柔軟に幅（もしくは高さ）を調整します。
例えば、FR値が1FRの列が2列あるとすると、グリッドボックスの列幅に関わらず、各列幅が1：1になるように、それぞれの列にサイズを割り振ります。片方の列を0.5FRにすると、もう片方との比率を、0.5：1（1：2）になるように割り振ります。
最小値／最大値を設定することで、行や列が設定された最小値より縮んだり、設定された最大値より広がったりすることを防げます。例えば、行の高さはデフォルトでautoに設定されており、中のコンテンツに合わせて拡大または縮小されます。
行の高さの最小値を例えば200pxにしたい場合は、最小値を200pxに、最大値をAutoに設定します。こうすると、行はコンテンツに応じて大きくなり、200pxを超えると縮小されることはありません。列についても同じことができます。
列や行の最小値や最大値を設定するには、キャンバスの列や行のヘッダーか、スタイルパネルに必要な値を入力します。
グリッドの中には、見出し、画像、Divブロック、そして別のグリッドなど、何でも追加することができます。グリッドに追加したものはすべて、そのグリッドの子要素になります。デフォルトでは、新しいグリッドの子要素は個々のグリッドセルに内包され、左から右へと空いているセルに入力されます。行内に空きセルがなくなると、新しい行が生成されて、新しいグリッドに子要素が置かれます（いわゆるZ字にコンテンツが配置されていきます）。
グリッドの子要素が埋まっていく向きは、スタイルパネルの「Direction」を切り替えることで変更できます。デフォルトでは、子要素を左から右へ配置する行設定になっていますが、子要素を上から下へ配置する列設定に変更ができます（いわゆるN字方向）。
自動配置の設定を上書きして手動でグリッドに項目を配置するには、Shiftを押しながら要素をグリッドにドラッグします。手動でグリッドに配置されたアイテムは、手動配置の設定が維持されます。
既存のグリッド内の子要素の配置設定を手動に変更するには、そのグリッド内の子要素を選択し、スタイルパネルの「Position」の値を更新します。
手動で配置されたグリッドの子要素（グリッドチャイルド）は、指定されたグリッドセルに留まります。一方、自動的に配置されたグリッドチャイルドは、新しいグリッドチャイルドを配置する度に次のセルに移動します。
グリッドの子要素の中に要素を入れ子にして、1つのグリッドセルに複数の要素を追加することができます。これを行うには、まず、Divブロックなどのレイアウト要素を直接のグリッド子要素としてグリッドセルに追加します。
レイアウト要素（Divブロックなど）をグリッドチャイルドとして追加したら、Controlキーを押しながら要素をグリッドセルにドラッグして、そのDivブロックに他の要素を追加することができます。
グリッドの子要素を複製して、グリッド内の複数のセルに同じコンテンツを再利用するには、2つの方法があります。
コンテンツをグリッドに配置した後は、自由に操作することができます。コンテンツを移動して、別のセルに配置し直すこともできます。複数のセルにまたがるようにコンテンツを配置することもできます。また、グリッド内のコンテンツの配置を調整することもできます。
グリッド内のコンテンツを再配置するには、グリッド内の子要素を選択して、キャンバス上またはナビゲータで希望する位置にドラッグします。
また、スタイルパネルの「Grid Child」セクションで、グリッドの子要素の順番を設定することができます。
グリッド内のすべての子要素の配置を変更するには、グリッドを選択し、スタイルパネルで「Align」設定を変更します。
グリッドセル内の子要素の配置を変更するには、そのグリッドの子要素を選択し、スタイルパネルの「Grid Child」セクションの整列の設定を更新してください。
グリッドの子要素を複数のグリッドセルにまたがって配置するには、グリッドの子要素を選択し、グリッドセルの隅に表示されるハンドルをドラッグします。
スタイルパネルでは、グリッドの子要素の範囲を指定することもできます。自動配置のグリッドの子要素には、何列、何行にまたがるようにするかを設定できます。
手動で配置した子供の場合、どの列と行から項目が始まり、どの列で終わるかを入力します。
グリッドの子要素の「Position」にマイナス値を設定すると便利な場合があります。（下記例）
マイナスの値は、グリッドの端から相対的に子要素を配置することができます（右から左、または下から上へのセルを参照します）。
ナビゲ―ションバーをすべての列にまたがるように配置するには、Positionの「Column Start」を1に、「Column End」を-1に設定するとできます。これで、列をいくつ増やしても、その要素は端から端まで広がって表示されます。
フッターを常にグリッドの最後の行に置くには、ColumnのStart/Endを-1/-1に設定します。
子要素をグリッドの中央に配置し、左右の列数を同じにしたい場合は、「End」の値を「Start」の値にマイナスを付けた値にします。例：3/-3または2/-2
これで、小さいブレイクポイントで列を削除しても、子は中央に配置されたままとなります。
グリッドの子要素の設定は、選択された要素にのみ適用され、クラスと一緒に保存されるわけではありません。スタイルパネルのピンク色のラベルは、現在のブレイクポイントで選択された要素に適用された設定であることを示しています。これらのスタイルは下位のブレイクポイントに継承され、オレンジ色のラベルで表示されます。より小さいブレイクポイントで継承された（オレンジ色の）スタイルを上書きすると、インジケータは再びピンク色になります。
適用されているグリッド子設定を削除するには、ピンク色のラベルをクリックし、リセットをクリックします。
手動で配置したグリッドの子要素は、同じセルで要素が重ね合わされたときに自動的にオーバーラップします。また、これらの重なり合う要素の順序を制御することができます。これは、ナビゲータで位置を変更したり、PositionやZ-indexの設定を調整することで行えます。
グリッドの子要素を拡大した場合、グリッド内に空のセルが残ることがあります。これらのセルに自動的にコンテンツを入れるには、スタイルパネルで「Dence」設定にチェックボックスを入れます。
Denseはグリッドの子要素をグリッドの空のセルにはめ込もうとします。これは操作性に悪影響を及ぼす可能性があるので注意です。
各端末に対応するようにグリッドを設計するには、小さいブレイクポイントで列を手動で削除するか、自動調整を有効にして、小さい画面サイズに対応する列と行を自動的に生成することができます。
ブレイクポイントごとのグリッドレイアウトを手動で設定する
すべてのデバイスでグリッドのレスポンシブを確認するには、グリッドを小さなブレイクポイントで表示し、必要に応じて列を削除してください。
小さいブレイクポイントでカラムを削除できない場合は、次のことを試してみてください。
オートフィット（Auto-fit）はCSSグリッドの最も強力な機能の一つで、列の繰り返しや折り返しを自動的に行うため、ブレイクポイントごとの調整は必要なく、あらゆる画面幅に対応したレイアウトを構築できます。
自動配置を有効にするには、1列と1行を除くすべての列を削除します。列の最小・最大値を設定し、オートフィットを有効にします。
より多くの列を自動生成して繰り返し、レスポンシブにコンテンツを配置することができます。
いかがでしょうか。
当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。
以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。
ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。
Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。
今後とも宜しくお願い致します。
Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。
Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。
Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。
会社名
Funwork株式会社
所在地
東京都千代田区東神田3-4-12
代表者
堀尾 尭史
電話番号
メール
03-5809-2979
backoffice@funwork2020.com
URL
設立日
2020年5月18日
資本金
9,000,000円
取引銀行
きらぼし銀行
Webサイト、ITサービス受託開発
マーケティングコンサル事業
シェアオフィス及びコワーキングスペースの運営