グリッドレイアウト

１行あたり３列の表

１

２

３

４

５

６

CSS

grid-template-columnsで列（フィールド）の数と幅を指定する。grid-auto-rowsで行の高さを指定する。全ての行がその高さになる。

gapは、行や列の間に余白を入れるときに指定する。最初の値が行間の幅、２番目の値が列間の幅になる。行間と列間を同じ値にするには値をひとつだけ指定してもよい。

HTML

display属性を gridにした要素の中にグリッドに表示する要素を順番に記述する。各要素は、グリッドの定義に従い、左上から右下に向かって折り返しながら、順次表示される。例題では、親子の要素はともに divを使っているが、spanでも構わない。グリッドの場合、要素がブロックでもインラインでも違いはない。

列の連結

１

２

３

４

５

CSS

HTML

行の連結（１）

１

２

３

４

５

CSS

HTML

行の連結（２）

１

２

３

４

５

CSS

２列目以降の列において行を連結するときは、 grid-columnにより連結する列を指定すること。

HTML

以上の方法を組み合わせることによって、あらゆる配置のグリッドを定義することができる。

行の高さの指定

行の高さは、指定しないと代入された文字の大きさに合わせて自動的に調整される。grid-auto-rowsを指定すると、すべての行が指定した高さになる。上記の例はこれである。

以下の例は　grid-template-rowsを指定している。指定した値が１行目から順番に高さとして設定される。指定がない行はデフォルトの設定となる。

１

２

３

４

５

６

CSS

HTML

DOM APIによりグリッドを作成する

JavaScript

若干見た目に差異があるのは数字が半角だからである。

グリッド定義をネストする

グリッドの定義をネストすれば複雑な構造のページを作成することができる。構造的なページをデザインするには、前記した行や列の連結より、こちらの方法を用いる方が一般的だろう。

あああああ

いいいいい

ううううう

333

4444

55555

666666

最上位のフレームは左右に２分割し、さらに右側のフレームは上下に２分割する。右側のフレームの上側は左右に２分割し、上側は左右に３分割している。

HTML

CSS

grid-template-columns は列の幅を指定するプロパティで、 max-contentは、設定された要素が列の中に収まる必要最小限の幅を確保する。ただし最上位のグリッド（本例では frame1クラス）の場合、右端の列の幅はページの終わりまで確保される。

grid-template-rows は行の高さを指定するプロパティで、max-contentは、設定された要素が行の中に収まる必要最小限の高さを確保するものである。