c+ Studioで作成するページレイアウト種別の動作についてご案内します。
c+ Studioでは、作成するページに2つのレイアウト種別が設定できます。
- グリッドレイアウト
- 相対的にページレイアウトを設定します。ページサイズを100%としたときに、どれだけの数で区切るか（格子の数）を指定します。動的にレイアウトします。
- フリー（自由な）レイアウト
- 絶対的にページレイアウトを設定します。ピクセルでページサイズを指定します。画面サイズが変わっても、作成したままのイメージがそのまま縮小されます。
グリッドレイアウトについて
ページサイズを100%とした時に、何分割するかをグリッド数で設定します。
ページサイズに対して、相対的にウィジェットを配置するので、PCやスマホなど、レスポンシブで動作させたい時などに設定します。
※但し、レスポンシブの際に、想定通りに配置されない場合があります。イメージどおりに設定したい場合は、フリーレイアウトをオススメします。
以下の場合は、4グリッドになります。
実際の動作
PCでの設定イメージに対して、スマホの場合はウィジェットサイズに応じて1分割もしくは2分割で配置します。
上記の画面にて、右上のグラフを正方形に近づけると、2分割で配置されます。
ウィジェットの配置は、上から順に、左→右に配置（Z型にソート）されるため、ラベルなどを上下に設定した場合は、イメージどおりに配置されない場合があります。
（下図のサンプルのとおり、PC上では上下に並べているウィジェットが、スマホ表示の際に、Z型にソートされるため、ラベルが重なる）
フリー（自由な）レイアウトについて
ピクセルでページサイズを指定します。
フリーレイアウトは画面サイズが変わっても、作成したままのイメージがそのまま縮小されます。
（PCの場合は、横にスクロールする形になります）
フリーレイアウトはレスポンシブではない動作をするため、作成したページのイメージどおりに作成したい場合に使いやすいレイアウトです。