gridレイアウトは２つのブロックがあります。
このページでは「自由レイアウト」について解説しています。
ブロックを自由に配置できるブロックです。
こちらは上級者向けの機能になっています。
グリッド（自由配置）ブロックを追加する
このブロックの子ブロックで、
[LPC] レイアウトにあるグリッドのアイコンをクリックして追加します。
/grid と入力しても追加できます。
薄っすらと表のような網目線と[ ＋ ] が２つ表示されます。
縦20 x 横20 の網目線上で位置を指定でき、ブロック同士も重ね合わせれるので、自由にどこでも配置できるレイアウトになります。
親ブロックの設定
デフォルトでは、画面内に列線は20、縦線は20表示されます。
列線について
１列の横幅は画面サイズ（もしくはセクションブロックなど、外側ブロックで指定したサイズなど）を20列で割ったおおよそのサイズになっています。
列の設定の「グリッドの列数を変えない」をオフにすると、各デバイスに応じて列数を変更することができます。
オフにすると中身のコンテンツに応じて列幅が変動しますので、表示が崩れやすくなります。
理解している場合のみオフにしてご利用ください。
行数はデバイス毎に変更が可能です。
行の高さは 2rem （16px * 2 ) が設定されています。
1行を大きくしたい場合は、行の高さを増やします。
「行の高さを固定する」のチェックをオフにすると、中身のコンテンツに応じて行幅が変動します。
理解している場合のみオフにして解除して下さい。
「高さ固定時のはみ出し」は、指定した行幅以上に中身のコンテンツがあった場合、「隠す」「スクロール」「はみ出す」の挙動が設定できます。
デフォルトは「はみ出して表示」となっていますので、子ブロックは、はみ出して設置されます。
子ブロックの設定
子ブロックの重なり順とはみ出しについて
重なり順は、子ブロック同士が重なった時にどちらが前面に出るかの重みです。
数が大きいほど前面に出ます。
はみ出しは、親ブロックのはみ出しと同じで、子ブロック毎に設定が可能です。
デフォルトは「親を継承」となっていますので親で設定した表示となります。
子ブロックの行列の開始と終了地点を指定する。
下記の右側の画像は重なり順は「２」コンテンツのはみ出しを「隠す」にしています。
ここから開始列や終了列、終了行などを変更します。
「隠す」を指定しているので表示幅以下になると画像が隠れています。
また、開始列や開始行を変えることで表示される位置が変わっているのがわかります。
次に左側の画像は重なり順を「３」コンテンツのはみ出しを「継承（親と同じ）」にしています。
親が「はみ出す」に指定した場合は「はみ出す」設定になります。
重なりを右の画像よりも大きくしているので、左の画像が右の画像の上に表示されています。
このように各デバイス毎に配置と大きさが指定できるようになります。
ブロックエディターの仕様上、動画のように一度画像をクリックしないとその大きさに表示されません。
クリックしなくてもフロントページでは設定の大きさで表示されています。
補足
注意事項
Gutenbergのブロックエディタの仕様上、ブロックエディタでの表示をそのままフロントページで再現できません。
特に表示幅（列幅）はセクションブロックなどの「幅広」や「全幅」によって横サイズの大きさが変わりますので、それに付随して列の広さも変わります。
端末によっても列幅は変わってきます。
思っていたよりも画像が大きくなったり、文字が長くなったりします。
まずは画面幅を設定し、このレイアウトで行う配置を決めて、実際のフロント画面を確認しながらご利用下さい。
参考例
内部コンテンツによっては横幅が変わると、それに合わせて縦幅も変わる場合があります。
例えば、横長の画像を設置している場合、画像は横幅に合わせて自動的に拡大・縮小されます。
このように、内部コンテンツによっては、ブロックエディタ上の見た目と、フロント側の見た目が完全には一致しない点にご注意ください。
うまくレイアウトできないときは、以下を参考にして下さい。
１．Chromeのディベロッパーツールで線を確認する
フロントページを開いて、グリッドを設定しているコンテンツの上から、右クリックして一番下にある「検証」を押して下さい。
右側にソースコードが出てきます。その中に「grid」と表示されている箇所が近くにあると思いますのでそれをクリックします。
以下のようにおおよそですが、ブロックエディターの補助線と同じような補助線が出てきます。
数字が上下、左右にでています。上と左が開始・終了で設定した数字と合致していると思います。
２．グリッドブロックの指定
ブロックエディターの画面下にブロックの内側が出ていますので、それをクリックするとワンクリックで選択ができます。
また、左パネルの３本線の「ドキュメント概観」を開くと以下のように選択することも可能です。
