メディアクエリなしで自己適応するグリッドを構築し、subgrid で入れ子のコンポーネントを親のトラックに揃えましょう。
このレッスンを Kodokon で開くrepeat(auto-fill, ...) と repeat(auto-fit, ...) は、コンテナの幅が許すだけのトラックを作ります。違いが現れるのは、アイテムが可能なトラック数より少ないときだけです。auto-fill は空のトラックを保持します(2枚のカードは最小サイズのままとどまり、右側には空きスペースが残ります)。一方 auto-fit は空のトラックをゼロに畳み込みます。占有されているトラックは、1fr の最大値を与えられているので、解放されたスペースをすべて吸収し、2枚のカードは幅いっぱいに広がります。
.gallery-fill {
display: grid;
grid-template-columns: repeat(
auto-fill, minmax(150px, 1fr)
);
}
.gallery-fit {
display: grid;
grid-template-columns: repeat(
auto-fit, minmax(150px, 1fr)
);
}ベテラン開発者でさえはまる minmax() の2つの罠があります。1つ目。minmax(240px, 1fr) は、コンテナが240pxより狭いときにあふれます。最小値は動かせない下限だからです。定石となる修正は、比較関数を入れ子にすることです。minmax(min(100%, 240px), 1fr) のように。2つ目。1fr 単独は minmax(auto, 1fr) と等価です。この auto の最小値は、分割不可能なコンテンツ(長いURL、<pre>)がトラックをその取り分を超えて広げることを許してしまいます。minmax(0, 1fr) が分配を固定します。
.grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(
auto-fit,
minmax(min(100%, 240px), 1fr)
);
}subgrid は、入れ子のコンポーネントをまたいだ揃えという古い問題を解決します。grid-template-rows: subgrid を使うと、内側のグリッドは自前のトラックを作り出しません。またがっている領域にわたって親のトラックを採用します。さらに、親の行名(そして自前のものも追加できます)や、ローカルで上書き可能な gap も継承します。典型的なケースは、タイトル、説明、フッターが、コンテンツの長さがどうであれ、カードからカードへ水平に揃うようなカードです。subgrid 以前にはきれいに実現できませんでした。各カードが高さを孤立して計算していたからです。
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.card {
grid-row: span 3;
display: grid;
grid-template-rows: subgrid;
row-gap: 0.5rem;
}