![【入力補助】グリッドレイアウトの使い方](https://tan-taka.com/diver-demo/wp-content/uploads/sites/3/2018/04/277029310da9df05209125a739f81584.png)
入力補助のグリッドレイアウトを使えば、投稿内でカラムわけされたレイアウトを作成することができます。
グリッドレイアウトの使い方
入力補助のグリッドレイアウトの項目から、設置したいレイアウトを投稿に挿入します。
テキストエディター
![]()
![](https://tan-taka.com/diver-demo/wp-content/uploads/sites/3/2018/04/f67ff156ab37cf645217adc05ec31856.png)
ビジュアルエディター
![]()
![](https://tan-taka.com/diver-demo/wp-content/uploads/sites/3/2018/04/cfdc86640076fa04f2f124026110e8dc.png)
そうすると、HTMLが出力されますので、表示したい項目を中に記述します。
テキストエディター
ビジュアルエディター
実際に表示されたものが下記になります。
![](https://tan-taka.com/diver-demo/wp-content/uploads/sites/3/2017/01/lgf01a201405111200.jpg)
![](https://tan-taka.com/diver-demo/wp-content/uploads/sites/3/2017/01/lgf01a201407252100.jpg)
![](https://tan-taka.com/diver-demo/wp-content/uploads/sites/3/2017/01/lgf01a201408050700.jpg)
グリッドレイアウトオプション設定について
通常のレイアウトは、画面サイズが小さくなると解除されて、1カラムになりますが、チェックを外して出力すると、
画面サイズに影響されず、レイアウトが固定されたままになります。
![](https://tan-taka.com/diver-demo/wp-content/uploads/sites/3/2017/01/lgf01a201405111200.jpg)
![](https://tan-taka.com/diver-demo/wp-content/uploads/sites/3/2017/01/lgf01a201407252100.jpg)
![](https://tan-taka.com/diver-demo/wp-content/uploads/sites/3/2017/01/lgf01a201408050700.jpg)
余白を0にすると、各要素の余白が無くなります。
![](https://tan-taka.com/diver-demo/wp-content/uploads/sites/3/2017/01/lgf01a201405111200.jpg)
![](https://tan-taka.com/diver-demo/wp-content/uploads/sites/3/2017/01/lgf01a201407252100.jpg)
![](https://tan-taka.com/diver-demo/wp-content/uploads/sites/3/2017/01/lgf01a201408050700.jpg)