この投稿は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のメリットについて解説した記事も投稿しています。よろしければご覧ください。
Webflowとは何ですか？
Webflowは、コードを書かなくてもプロ品質のWebサイトを制作できる、アメリカ発のノーコードWebサイト制作プラットフォームです。デザイン・レイアウト・アニメーションをビジュアル操作で組み上げながら、裏側では実際にクリーンなHTML/CSSが生成される点が特徴で、コーディングができなくてもデザインの自由度とコードレベルの精度を両立できます。
WebflowとWordPressの違いは何ですか？
WordPressはCMS（コンテンツ管理システム）を中心に、プラグインやテーマを組み合わせてサイトを構築する仕組みで、細かなカスタマイズを行う場合はHTMLやPHPといったコーディング技術が求められる場面が多くあります。一方Webflowは、デザインツールと開発環境が一体化したビジュアル制作プラットフォームで、プラグインやコーディングに依存せず視覚的な操作だけで細かなレイアウトやアニメーションを直接作り込めるのが大きな違いです。
Webflowは無料で使えますか？
無料プランも用意されていますが、独自ドメインでの公開やCMS機能の拡張、フォーム送信数の上限緩和などには有料プランへの加入が必要です。個人の検証用やポートフォリオ作成程度であれば無料プランでも十分試すことができます。
Webflowはプログラミング知識がなくても使えますか？
基本的な操作はプログラミング知識がなくても、ドラッグ＆ドロップとビジュアル設定だけでサイトを作成できます。ただし、複雑なインタラクションやカスタム機能を実装したい場合は、HTML/CSSの基礎知識があると制作しやすくなります。
Webflowは日本語に対応していますか？
管理画面（エディタ）自体は英語ベースでの提供となっていますが、公開するWebサイト自体は日本語のコンテンツで問題なく作成・運用できます。日本語フォントの設定やSEO用のメタ情報も日本語で入力可能です。
Webflowのサイトは表示速度が速いですか？
Webflowはクラウド最適化されたホスティング環境（AWS基盤）を採用しており、画像の自動最適化やCDN配信などが標準で組み込まれているため、一般的なCMSと比較して高速な表示速度を実現しやすい傾向にあります。
WebflowでSEO対策はできますか？
Webflowにはメタタイトルやディスクリプション、OGP設定、見出しタグの構造化、XMLサイトマップの自動生成など、SEOに必要な基本要素が標準機能として備わっています。追加のプラグインなしである程度のSEO対策が可能な点は大きなメリットです。
WebflowはAEO対策に対応していますか？
はい、対応しています。Webflowで制作したサイトはセマンティックなHTML構造、スキーママークアップ、SEO用メタデータ、llms.txt、サイトマップ、robots.txtなどが標準で組み込まれており、AI検索エンジンにとって内容を理解・引用しやすいサイト作りがしやすい設計になっています。さらにWebflowは、AIによる自社の言及状況を計測し、メタデータや構造化データなどの改善提案を行うAEO専用の分析・支援機能も提供しています。
Webflowでのサイト制作を日本語で相談できる会社はありますか？
Funwork株式会社は、Webflowを用いたサイト制作の受注事業を日本で初めて公に事業化した会社です。これまでにWebflow関連のプロジェクト数は累計約200件（2026年7月現在）にのぼり、豊富な経験とノウハウを有しています。企画からデザイン、実装、公開後の運用まで日本語で一貫してサポートしており、Webflowでの制作を検討している方は安心してご相談いただけます。
Webflowの操作方法がわからない場合、代行や相談はできますか？
Funworkでは、サイト制作の全面的な代行から、既存サイトの一部修正・機能追加といった部分的なサポートまで、状況に応じた対応が可能です。Webflowの操作に不慣れな方でも、まずはお問い合わせページから気軽にご相談いただけます。
Webflowで作ったサイトの運用やSEO対策も依頼できますか？
Funworkはサイト制作事業に加えてWebマーケティング支援事業も展開しており、公開後のSEO対策やコンテンツ更新、アクセス解析にもとづく改善提案まで継続的にサポートしています。制作して終わりではなく、公開後の成果につながる運用まで一貫して依頼できます。
既存のWordPressサイトからWebflowへ移行できますか？
はい、既存サイトのデザインやコンテンツを踏まえたうえで、Webflowへのリニューアル移行のご相談も承っています。移行にあたっての注意点や進め方についても、事前にヒアリングのうえご案内していますので、まずはお問い合わせください。
会社名
Funwork株式会社
所在地
東京都千代田区東神田3-4-12
代表者
堀尾 尭史
電話番号
メール
03-5809-2979
backoffice@funwork2020.com
URL
設立日
2020年5月18日
資本金
9,000,000円
取引銀行
きらぼし銀行
Webサイト、ITサービス受託開発
マーケティングコンサル事業
シェアオフィス及びコワーキングスペースの運営