このページでは、グリッドレイアウトを説明します。
個人的には、このグリッドレイアウト方式はオススメなのですが、 使いこなすには知っておくべき情報が多いのが短所です。
そのかわりに、使い方に慣れるとすごく便利です。
伝えたいことが多いので、まずは使うために必要な最低限の情報だけをこのページにまとめました。 （それでも分量が多くなってしまいました。）
複雑な使い方は上級編に記載します。
最初にグリッドレイアウトの基本形を下に記載します。
<div style="display: grid; grid-template-columns: 200px 100px 300px;"><div style="background-color: #FFC;">１つ目の文章です。</div><div style="background-color: #FCF;">２つ目の文章です。</div><div style="background-color: #CFF;">３つ目の文章です。</div></div>
比較のためにフレックスボックスレイアウトで同じように表示する例を下に記載します。
<div style="display: flex;">
<div style="background-color: #FFC; width:200px;">１つ目の文章です。</div>
<div style="background-color: #FCF; width:100px;">２つ目の文章です。</div>
<div style="background-color: #CFF; width:300px;">３つ目の文章です。</div>
</div>
上の例は下のように表示されます。
<div style="display: grid;">～</div>で囲むとその内部のレイアウト方式がグリッドになります。
"grid-template-columns: 200px 100px 300px 0;"は内部のブロックをどのように配置するのかを設定しています。この例では、
を設定しています。
このため、最初（"display: grid;"があるところ）を見ただけで、段数や横幅情報が分かりますし、レイアウトの調整も行ないやすいです。
説明は割愛しますが、横幅の指定にはpx指定だけでなくem単位や％、autoなども指定できます。 ネット検索で調べてください。あるいは、トライエラーでいろいろ指定して良さそうな数値にすればよいです。
もう１つの基本形を下に記載します。
<div style="display: grid; grid-template-columns: 0 200px 0 100px 0 300px 0;">
<div style="background-color: #FFC;">１つ目の文章です。</div>
<div style="background-color: #FCF;">２つ目の文章です。</div>
<div style="background-color: #CFF;">３つ目の文章です。</div>
</div>
上の例は下のように表示されます。
最初の基本形との違いは、２つあります。
違いの１つ目は、"grid-template-columns: 0 200px 0 100px 0 300px 0;"と指定されているところです。
２つ目は、グリッドレイアウトの内側が、改行されていることです。
これまでなんども「改行だけの部分もブロック１つ」になる話をしてきましたが、これもそれと同じです。上の例では実は内部のブロック数は７個あり、そのうち４つが「改行ブロック」になっています。
grid-template-columnsのパラメーターが0になっているところは、「改行ブロック」の横幅を０ピクセルにするように設定しています。そのため中身のあるブロック（改行ではないブロック）だけ横幅が設定されます。
最初の基本形はすべて１行に記載しているので読みにくく、編集しにくいという問題がありますが、この基本形はそれが少し解消されます。
自由記入欄では改行が「改行だけの部分もブロック１つ」になることを利用した、「基本形（改行ブロック利用版）」という感じです。以降、「改行型グリッド」と書いた場合は、こちらの書き方をしていると思ってください。
注意：これは英雄クロニクルの自由記入欄に書くときにだけ使う事のできる特殊な書き方なので、一般的なHTMLやCSSの説明サイトなどには全く出てきません。
このページだけで使用している特殊な名称であることに注意してください。
ピクセル数を指定するのではなく、grid-template-columnsに次のような指定を行うと、横幅を２等分したり、３等分したりすることができます。
<div style="display: grid; grid-template-columns: 0 1fr 0 1fr 0 1fr 0;">
<div style="background-color: #FFC;">１つ目の文章です。</div>
<div style="background-color: #FCF;">２つ目の文章です。</div>
<div style="background-color: #CFF;">３つ目の文章です。</div>
</div>
上の例は下のように表示されます。
詳しい説明は割愛します。「1fr を並べると、その数だけ等分される」と憶えてください。
また、上の例の１か所だけ 2fr に変えると、そこだけ２倍の横幅になります。
他にも、％で指定することもできますが、詳しいことは検索して調べてみてください。
グリッドレイアウトでは、grid-template-columnsで段数を設定します。
設定された段数以上のブロックが内部にあると、少し変わった配置をします。
実際の例を見てみましょう。
<div style="display: grid; grid-template-columns: 120px 120px; text-align: center;"><div>１</div><div>２</div><div>３</div><div>４</div><div>５</div><div>６</div></div>
<div style="display: grid; grid-template-columns: 90px 90px 90px; text-align: center;"><div>１</div><div>２</div><div>３</div><div>４</div><div>５</div><div>６</div></div>
２つの入力例がありますが、grid-template-columnsのパラメーター以外はすべて同じです。
１つ目の入力例では、"grid-template-columns: 120px 120px;"で、２段組みを設定しています。
それに対し内部のブロックは６個あります。 １～２個目は普通に（左→右に）２段組みでレイアウトされます。
そして３個目は２個目の右ではなく、１個目の下にレイアウトされます。 ４個目は２個目の下、５個目は３個の下、６個目は４個目の下です。
このように、grid-template-columnsで設定した段数を超えるブロックがあると、（改行したように）次の行をつくって、そこからまた段組みを行っていくのがグリッドレイアウトの特徴です。
２つ目の入力例では、grid-template-columnsのパラメーターで３段組みを設定しているので、１～３個目が１行目、４～６個目が２行目にレイアウトされます。
これをうまく利用すると、テーブル（表）のような形状のレイアウトを作るのが楽になります。 例えば、レイアウトの複雑な例のプロフィールの部分は、次のような入力例で作ることができます。改行型グリッドで作っています。
<div style="display: grid; grid-template-columns: 0 auto 0 1fr; text-align: right; width: 250px;">
<div>姓名</div>
<div>パープル＝レンド</div>
<div>種族</div>
<div>バーサーカー</div>
<div>性別</div>
<div>なし（見た目は女性型）</div>
<div>年齢</div>
<div>３０年目（見た目は１６才ぐらい）</div>
<div>身長</div>
<div>１５４ｃｍ</div>
<div>体重</div>
<div>５２．６ｋｇ</div></div>
各ブロックの間隔を拡げることもできます。
次のように入力してください。
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;"><div style="background-color: cyan;">１つ目の文章</div><div style="background-color: yellow;">２つの目の文章</div><div style="background-color: green;">３つ目の文章はちょっと長くしてみましょう。</div><div style="background-color: orange;">うっかり４つ目の文章を書いてしまった。</div><div>さらに５つ目</div></div>
"gap: 20px;"で、各要素の間に（縦横）に２０ピクセルの間隔（ギャップ）が追加されます。
"gap: 10px 40px;"と指定すると、縦の間隔が１０ピクセル、横の間隔が４０ピクセルになります。
gapを改行型グリッドで使うときは改行ブロックの前後もgapが入る事に注意してください。
"gap: 20px 0;"のように縦方向の間隔だけを設定し、横方向の間隔は改行ブロックに対する横幅として設定したほうがよいでしょう。
具体例を下に記載します。
<div style="display: grid; grid-template-columns: 0 1fr 20px 1fr 20px 1fr; gap: 20px 0;">
<div style="background-color: cyan;">１つ目の文章</div>
<div style="background-color: yellow;">２つの目の文章</div>
<div style="background-color: green;">３つ目の文章はちょっと長くしてみましょう。
</div>
<div style="background-color: orange;">うっかり４つ目の文章を書いてしまった。</div>
<div>さらに５つ目</div>
</div>
グリッドレイアウトで２段組みを０から作ってみましょう。
最終的には、フレックスレイアウトの「間隔」で表示したものを同じものを作ります。
まずは２段組みとして最低限の状態を作ります。
<div style="display: grid; grid-template-columns: 1fr 1fr;"><div>左の段</div><div>右の段</div></div>
これが基本形です。
横幅や間隔などの設定は後回しにして、左の段と右の段に文章を追加します。
<div style="display: grid; grid-template-columns: 1fr 1fr;"><div>左の段
適当に長い文章を書いてみる。
◆英雄キャッシュ還元キャンペーン！！
■キャンペーン内容
・30人に1人購入額をその場で還元！！
キャンペーン期間中30人に1人に英雄キャッシュを購入していただいたその場で、購入額と同額のボーナス英雄キャッシュをプレゼントいたします。</div><div>右の段
◆キャンペーン期間
1月25日(木)17:00 ～ 2月1日(木)12:00</div></div>
最後に、背景色を塗り、左右や中央の間隔（余白）を調整します。
<div style="display: grid; grid-template-columns: 1fr 1fr;"><div style="background-color: pink; margin: 0 10px;">左の段
適当に長い文章を書いてみる。
◆英雄キャッシュ還元キャンペーン！！
■キャンペーン内容
・30人に1人購入額をその場で還元！！
キャンペーン期間中30人に1人に英雄キャッシュを購入していただいたその場で、購入額と同額のボーナス英雄キャッシュをプレゼントいたします。</div><div style="background-color: pink; margin: 0 10px;">右の段
◆キャンペーン期間
1月25日(木)17:00 ～ 2月1日(木)12:00</div></div>
上の例ではmarginで間隔を設定していますが、もちろんgapを使ってもよいです。
同じものを改行型グリッドを使って作ると下のようになります。
<div style="display: grid; grid-template-columns: 10px 1fr 20px 1fr 10px;">
<div style="background-color: pink;">左の段
適当に長い文章を書いてみる。
◆英雄キャッシュ還元キャンペーン！！
■キャンペーン内容
・30人に1人購入額をその場で還元！！
キャンペーン期間中30人に1人に英雄キャッシュを購入していただいたその場で、購入額と同額のボーナス英雄キャッシュをプレゼントいたします。</div>
<div style="background-color: pink;">右の段
◆キャンペーン期間
1月25日(木)17:00 ～ 2月1日(木)12:00</div>
</div>
「改行ブロック」の幅を0ではなく10pxや20pxにすることで、marginやgapの代わりにしています。
表示例は省略します。（いっしょなので）