このページでは、もう少し難易度の高いグリッドレイアウトの使い方を説明します。
下の記述例は、「左／中／右」が「１００／２００／３００」ピクセルの３段組みをグリッドレイアウトで作っています。 これまでグリッドレイアウトの例として、似たような例はいくつか紹介してきました。
<div style="display: grid; grid-template-columns: 100px 200px 300px; gap: 10px;"><div style="background-color: #FAF;">１</div><div style="background-color: #FAF;">２</div><div style="background-color: #FAF;">３</div><div style="background-color: #FAF;">４</div><div style="background-color: #FAF;">５</div><div style="background-color: #FAF;">６</div></div>
この例を少し変更します。変更点は色を付けています。
<div style="display: grid; grid-auto-flow: column; grid-template-rows: 20px 40px 60px; gap: 10px;"><div style="background-color: #FAF;">１</div><div style="background-color: #FAF;">２</div><div style="background-color: #FAF;">３</div><div style="background-color: #FAF;">４</div><div style="background-color: #FAF;">５</div><div style="background-color: #FAF;">６</div></div>
２つの違いをまとめると次のようになります。
| 異なる点 | 変更前 | 変更後 |
| styleの違い１ |
|
|
| styleの違い２ |
|
|
| 表示の違い |
１行目に左から１→２→３となり、２行目に４→５→６となっている。 |
１段目（左段）に上から１→２→３となり、２段目（右段）に４→５→６となっている |
"grid-auto-flow: column;"をつけることで、並び方が変化します。今まで横方向に並んでいたものが縦方向になります。
ただし、それだけではレイアウトするための情報が不足しています。行数（縦方向の数）が設定する必要があります。
そのための指定が、"grid-template-rows: 20px 40px 60px;"です。
この設定で「行の数が３個。それぞれの高さが２０／４０／６０ピクセル。」という情報が設定されることで、上の例のような並び方になります。
紹介はしたものの、英雄クロニクルの自由記入欄は横幅が６４０ピクセルと決まっています。
"grid-auto-flow: column;"を使うと横方向に伸びていくレイアウトになってしまうので、自由記入欄との相性がよくありません。あまり使わないほうが良いでしょう。
grid-template-columnsは段組みの数と各段の横幅を設定していましたが、それと同様にgrid-template-rowsは行の数と各行の高さを設定することができます。
そして、grid-template-columnsとgrid-template-rowは同時に指定することもできます。
<div style="display: grid; gap: 10px; grid-template-columns: 100px 200px 300px; grid-template-rows: 40px 60px;">
（内側のブロックは同じなので省略）
</div>
とすれば、３×２の表（横が３段で横幅１００／２００／３００ピクセル×縦が２行で高さ４０／６０ピクセル）を設定したことになります。
上の例は、次のように表示されます。
横（段）の設定はこのページの最初の例と同じです。見比べれば、高さ（行）の設定が加わっていることがわかりやすいと思います。
内部ブロックの数が、grid-template-columnsとgrid-template-rowの設定より多いとき、はみ出すことになりますが、非表示にはなりません。
高さがautoの行が増えた扱いで、レイアウトされて、表示されます。
下に例を表示します。（入力例は省略）
７個目が３行目に配置されます。
"grid-auto-flow: column;"が指定されている時は並び方違うので、横幅がautoの段が増えた扱いでレイアウトされます。
７個目が４段目に配置されますが、横幅が限られているので、ものすごく小さくなっています。
表計算ソフト（Excelなど）を使った事がある方は、「セルを結合する」という機能を使った経験があるかも？
グリッドレイアウトでも同様の結合ができます。
入力例は省略しますが、次のような２段の段組みをグリッドレイアウトで作っていたとします。
ほんの少し設定を加えるだけで、次のようなちょっと複雑なレイアウトにすることができます。
上の例では、入力する量（文章部分）が多くて肝心の部分がわかりにくくなるので、もう少し簡単な例で説明します。
最初の例は２×３の形になっていたので、文章を簡略化すると下と同じです。
<div style="display: grid; grid-template-columns: auto auto; gap: 10px;"><div style="background-color: #FAF;">■使い方１</div><div style="background-color: #FAF;">■使い方２</div><div style="background-color: #FAF;">■使い方３</div><div style="background-color: #FAF;">■使い方４</div><div style="background-color: #FAF;">■使い方５</div><div style="background-color: #FAF;">■使い方６</div></div>
まず、「■使い方２」を１つ下と結合します。
<div style="display: grid; grid-template-columns: auto auto; gap: 10px;"><div style="background-color: #FAF;">■使い方１</div><div style="grid-row-end: span 2; background-color: #FAF;">■使い方２</div><div style="background-color: #FAF;">■使い方３</div><div style="background-color: #FAF;">■使い方４</div><div style="background-color: #FAF;">■使い方５</div><div style="background-color: #FAF;">■使い方６</div></div>
"grid-row-end: span 2;"で、下方向と結合をします。
その結合によって「■使い方４」の置かれる場所が無くなったので、それ以降のブロックの配置が１つづつズレてしまいます。
数字を2から3に変えて、"grid-row-end: span 3;"にすると、さらに１つ下（つまり全部で３行分）を結合して次のようになります。（入力例は省略します。）
さらに並び方が変化しました。
２つ前の状態から「■使い方５」も下と結合すると、次のようになります。
あとは長い文章の部分も追加すると、最初に示した複雑なレイアウトが完成します。
ここまでの例のように、結合すると（後ろの）ブロックの配置がずれていく事に注意してください。
１つ目のブロックから順に結合していかないと、こんがらがって配置が制御できなくなってしまいます。
また、結合をするときは改行型グリッドは失敗しやすくなります。
これもずれることが原因で、「改行ブロック」が意図しない所に配置され始めて、レイアウトがめちゃくちゃになりやすいです。
上の例は下に結合してましたが、横（右）と結合することもできます。
「■使い方１」を右と結合するには次のように入力します。
<div style="display: grid; grid-template-columns: auto auto; gap: 10px;"><div style="grid-column-end: span 2; background-color: #FAF;">■使い方１</div><div style="background-color: #FAF;">■使い方２</div><div style="background-color: #FAF;">■使い方３</div><div style="background-color: #FAF;">■使い方４</div><div style="background-color: #FAF;">■使い方５</div><div style="background-color: #FAF;">■使い方６</div></div>
"grid-row-column: span 2;"で、右方向と結合をします。
これも数字を変えると、結合する数が変わります。
段数（および横幅指定）と結合の仕方を上手に制御すると、次のようにすることもできます。
これも簡略化した例で説明します。
まず、段数を４つにします。
<div style="display: grid; grid-template-columns: auto auto auto auto; gap: 10px;"><div style="background-color: #FAF;">■使い方１</div><div style="background-color: #FAF;">■使い方２</div><div style="background-color: #FAF;">■使い方３</div><div style="background-color: #FAF;">■使い方４</div><div style="background-color: #FAF;">■使い方５</div><div style="background-color: #FAF;">■使い方６</div></div>
次に「■使い方２」を右に３つ結合します。
<div style="display: grid; grid-template-columns: auto auto auto auto; gap: 10px;"><div style="background-color: #FAF;">■使い方１</div><div style="grid-column-end: span 3; background-color: #FAF;">■使い方２</div><div style="background-color: #FAF;">■使い方３</div><div style="background-color: #FAF;">■使い方４</div><div style="background-color: #FAF;">■使い方５</div><div style="background-color: #FAF;">■使い方６</div></div>
次に「■使い方３」と「■使い方４」を右に２つ結合します。
<div style="display: grid; grid-template-columns: auto auto auto auto; gap: 10px;"><div style="background-color: #FAF;">■使い方１</div><div style="grid-column-end: span 3; background-color: #FAF;">■使い方２</div><div style="grid-column-end: span 2; background-color: #FAF;">■使い方３</div><div style="grid-column-end: span 2; background-color: #FAF;">■使い方４</div><div style="background-color: #FAF;">■使い方５</div><div style="background-color: #FAF;">■使い方６</div></div>
そして「■使い方５」を右に３つ結合すれば、レイアウトの骨組みは完成です。（入力例は省略します。
最後に元々のテキストを追加して、横幅の指定（"auto auto auto auto"のところ）を調整すると完成です。
完成した入力例は下のようになります。ぜひ、実際にゲームの自由記入欄に入力して、このページと同じように表示されるのを実際に見てください。
<div style="display: grid; grid-template-columns: 200px auto auto 200px; gap: 10px;"><div style="background-color: #FAF;">■使い方１
ＭＰ吸収で、燃料を断て！
黒魔法アタッカーならそれで戦力外に出来ますし、見切り/先制/反射/不倒/損害制限などを発動させないようにすることで、他のアタッカーさんをサポートします。</div><div style="grid-column-end: span 3; background-color: #FAF;">■使い方２
トークンを召還し、攻撃だ！
パープルで直接剣秘技を使うより、トークンで剣秘技を使った方が強いです。
トークンは無属性です。増加で威力を増やせば、全加護防衛キャラさんに有効打を与えることもできます。
またトークンが倒されても被害は０です。不死アタッカーのように敵陣に突っ込ませるのも、お奨め戦術です。</div><div style="grid-column-end: span 2; background-color: #FAF;">■使い方３
壁を作って耐えろ！
トークンで奥配置の敵を吊り出したり、逆に、敵の移動を防ぐ壁として配置したり。</div><div style="grid-column-end: span 2; background-color: #FAF;">■使い方４
今だ。秘技を使え！
威力は低いですが剣秘技を使えます。見切りさんが相手ならワンチャンスあるかも？</div><div style="grid-column-end: span 3; background-color: #FAF;">■使い方５
物理と魔法が合わさって…。
剣通常攻撃（物理）＋追加ダメージ（魔法）の変則キャラです。
例えば「反射物理キャラ」「報復キャラ」を相手にするときには、「剣通常攻撃で弱めのダメージを与え、追加ダメージで止めをさす。」といった攻撃手段が有効な場合もあります。</div><div style="background-color: #FAF;">■使い方６
団結だ。友情パワー！
攻撃はトークンにまかせて、自分は団結による支援を他の人に与えます。位置取りしやすい事は利点です。</div></div>
改行型グリッドで結合を行うと「改行ブロック」のところズレて失敗しやすくなります。
しかしながら横方向の結合しか使わない場合は、ズレを上手く制御できるので失敗せずに結合できます。 やり方も難しくありません。以降に作り方を紹介しておきます。
最初に改行型グリッドで４×３の配置を作ります。
<div style="display: grid; grid-template-columns: 0 auto 10px auto 10px auto 10px auto; gap: 10px 0;">
<div style="background-color: #FAF;">■使い方１</div>
<div style="background-color: #FAF;">■使い方２</div>
<div style="background-color: #FAF;">■使い方３</div>
<div style="background-color: #FAF;">■使い方４</div>
<div style="background-color: #FAF;">■使い方５</div>
<div style="background-color: #FAF;">■使い方６</div></div>
表示は４段に見えますが、改行型グリッドなので本当は８段になっているのがポイントです。
ここで前と同様に、「■使い方２」を右に３つ結合したいのですが、「改行ブロック」が間にあることに注意します。つまり、「右に３つ」ではなく「右に５つ」結合します。
<div style="display: grid; grid-template-columns: 0 auto 10px auto 10px auto 10px auto; gap: 10px 0;">
<div style="background-color: #FAF;">■使い方１</div>
<div style="grid-column-end: span 5; background-color: #FAF;">■使い方２</div>
<div style="background-color: #FAF;">■使い方３</div>
<div style="background-color: #FAF;">■使い方４</div>
<div style="background-color: #FAF;">■使い方５</div>
<div style="background-color: #FAF;">■使い方６</div></div>
使い方３と使い方４、使い方５も考え方は同じです。
<div style="display: grid; grid-template-columns: 0 auto 10px auto 10px auto 10px auto; gap: 10px 0;">
<div style="background-color: #FAF;">■使い方１</div>
<div style="grid-column-end: span 5; background-color: #FAF;">■使い方２</div>
<div style="grid-column-end: span 3; background-color: #FAF;">■使い方３</div>
<div style="grid-column-end: span 3; background-color: #FAF;">■使い方４</div>
<div style="grid-column-end: span 5; background-color: #FAF;">■使い方５</div>
<div style="background-color: #FAF;">■使い方６</div></div>
ここまで来れば、文章の追加と横幅の調整だけなので、以降は省略します。