OrigamiUIを使ったグリッドレイアウトの作り方を紹介します。
グリッドレイアウトとは縦横に均等に並んだレイアウトのことでこちらのようなレイアウトになります。
このページではグリッドレイアウトでよくあるパターンを作りながらOrigamiUIを使ったグリッドレイアウトの作成方法を解説します。
- 3列のグリッドレイアウトを作る
- 5列のグリッドレイアウトを作る
- スマホとPCで列数を変更する
- グリッドの間隔(ギャップ)を調整する
OrigamiUIでグリッドレイアウトを作るには「グリッド」ブロックと「カラム」ブロックを組み合わせる必要があります。
ブロックの配置方法や使い方についてはこちらのページをご覧ください。
3列のグリッドレイアウトを作る
まずは3列のグリッドレイアウトを作ってみます。
OrigamiUIのブロックを以下のように配置してください。
グループ
- コンテナ
- グリッド
- カラム
- カラム
- カラム編集画面では以下のように表示されます。
カラムブロックの中には自由にブロックを入れることが出来ます。ここでは画像を入れておきます。
カラムブロックのどれか1つを選択して右側の設定パネルを表示してください。
画像のようにSM(スマホ)で12、MD(タブレット)で4、LG(PC)は空欄になっています。
これはスマホで12列、タブレット以降で4列の幅をとるという意味です。
カラムブロックの1つ上にあるグリッドブロックではデフォルトで12列が設定されています。
なので4列分の幅のコンテンツを3つ入れることができる(4×3=12)=3列のレイアウトを作ることができるということになります。
この数字を色々変えることでさまざまな列数で表示可能です。いくつか例をあげてみます。
- 1列: カラムを12に設定
- 2列: カラムを6に設定
- 4列: カラムを3に設定
- 6列: カラムを2に設定
- 12列: カラムを1に設定
5列のグリッドレイアウトを作る
上の例のように割り切れる数字ならカラムの設定だけで変更可能です。
5列や7列の場合はグリッドブロックの設定を変更します。
先ほど見たようにグリッドはデフォルトで12列に設定されています。
これを5とか7に変えることで列数を変更可能です。MD(タブレット)のところを5に変えてみます。
すると先ほどまで3列で表示されていたカラムが1列になりました。これはカラムの幅が4列なので2つ目のカラムが5列に収まり切らず、改行されているためです。
5列のカラムを表示するにはカラムの幅を1に設定して、カラムを2つ追加すれば5列のレイアウトになります。
スマホとPCで列数を変更する
PCやタブレットなどの幅の広い画面であれば3列や5列でも問題なく表示されますが、スマホのような狭い画面で5列表示するとかなり細長くなります。
このような場合はスマホでの表示を1列や2列にする必要があります。
現在の設定が以下のように、SM(スマホ)で12、MD(タブレット)で4、LG(PC)で空欄になっているとします。
これは最大12列(グリッドのデフォルト設定)の幅をスマホで12列、タブレット以降で4列使用するという意味です。
なのでスマホで1列表示したい場合は12のままでOKです(12列分の幅のところを12列分使用する)。
2列で表示したい場合は、SMのところを6(12列分の幅のところを6列分使用)に設定すればスマホで2列表示になります。
編集画面で表示を確認したい場合は、画面の右上にあるデバイスのアイコン(PCの場合はノートパソコンのアイコン)を押して表示したいデバイスを選択します。
グリッドの間隔(ギャップ)を調整する
グリッド間のスペース(ギャップ)を広くしたり狭くすることが出来ます。
グリッドブロックのグリッド設定の下の方にある「ギャップ設定」で調整することが出来ます。
ここで調整できるのは以下の項目です。
- ギャップ変数
- ギャップリセット
- ブレークポイントの選択
- ギャップ幅
- Row(縦方向)
- Column(横方向)
まずギャップ設定を行う際に必ず「ギャップ変数」をセットしてください。入力する数値は自由です。
ギャップ幅(ブロック間のスペース)はRowやColumnの値を選択しますが、この値はギャップ変数の1~10倍の値になっています。
例えば以下のように設定します。
例1) 縦方向のスペースを40pxにしたい -> ギャップ変数を10pxにセット、Rowで40を選択
例2) 縦を6px、横を18pxにしたい -> ギャップ変数を6px、Rowを6、Columnを18にする
例3) 縦を21px、横を68pxにしたい -> 縦方向用と横方向用のグループでそれぞれ設定
3つ目の例のように割り切れない場合は縦方向を設定するグループの中に横方向を設定するグループを入れてギャップをセットしてください。
もしくはギャップ設定ではなくスタイルのパディングやマージンから設定してください。
