グリッドレイアウト | 静的サイト用ejsテンプレート

grid-template-columns

grid-containerの幅によらず、カラム数は3つに固定。
画面幅が狭くなった場合に備えて、ブレイクポイントを設けてカラム数指定が必要。

最小値340px、最大値350px。grid-containerの幅によらず、カラム数は3つに固定。
grid-itemの幅の和がgrid-containerの幅を超える場合があるので注意。
overflow-x: auto; で横スクロールバーを表示するなどして対応。

grid-itemの幅は210px以上。余った分は幅を広げて埋める。

grid-itemの数がある程度ある場合はいい感じ。

grid-itemが1つだと広がりすぎて、違和感が出る。動的なコンテンツの場合で、grid-itemの数が少なくなるケースもある場合には向かない。

grid-itemの数が1行目分以上になる場合には、auto-fitの場合と差が出ない。
grid-itemの幅は210px以上。余った分も幅を広げて埋める。

grid-itemの数が1行分に満たない場合、auto-fitの場合のように幅いっぱいに広がることがない。

grid-itemが1つの場合。

auto-fitもauto-fillも、ブレイクポイントごとにカラム数を指定する必要がないのが利点。

カード内のサムネイル・見出し・説明文が、カードをまたいで縦位置で揃う。
親グリッドの行トラックを subgrid で子に継承させる。

grid-itemが親の列トラックを subgrid で引き継ぎ、
孫要素が親グリッドの列に沿って配置される。