[解決済み】グリッドアイテムのコンテンツが展開されないようにする。

質問

TL;DR。 のようなものはないのでしょうか？ table-layout: fixed CSSグリッドの場合

4x3の大きなグリッドで月、そこに7x6のグリッドを入れ子にして、年表示のカレンダーを作ろうとしました。

カレンダーはページいっぱいに表示される必要があるため、年グリッドコンテナの幅と高さはそれぞれ100%になります。

.year-grid {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template: repeat(3, 1fr) / repeat(4, 1fr);
}

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
}

以下は動作例です。 https://codepen.io/loilo/full/ryXLpO/

わかりやすくするために、そのペンの中のすべての月は31日で、月曜日から始まります。

また、問題を実証するために、とんでもなく小さなフォントサイズを選びました。

グリッドアイテム（＝曜日セル）は、ページ上に数百個あるので、かなり凝縮されています。そして、日数ラベルが大きくなりすぎると（左上のボタンでペンのフォントサイズを自由に変更できます）、グリッドのサイズが大きくなり、ページの本文サイズを超えてしまうのです。

この動作を防ぐ方法はありますか？

年グリッドは最初、幅と高さが100%になるように宣言したので、そこから始めるべきかもしれませんが、そのニーズに合うようなグリッド関連のCSSプロパティが見つかりませんでした。

免責事項 CSS Grid Layoutを使わなくても、そのカレンダーをスタイリングする簡単な方法があることは承知しています。しかし、この質問は、具体的な例を解決することよりも、このトピックに関する一般的な知識に関するものです。

どのように解決するのですか？

デフォルトでは、グリッドアイテムはそのコンテンツのサイズより小さくすることはできません。

グリッドアイテムの初期サイズは min-width: auto と min-height: auto .

この動作をオーバーライドするには、グリッドアイテムに min-width: 0 , min-height: 0 または overflow 以外の値で visible .

仕様書より

6.6. グリッドの自動最小サイズ 項目

グリッドアイテムのデフォルトの最小サイズをより合理的にするために、この 仕様では auto の値は min-width / min-height を持つグリッドアイテムには、指定された軸での自動最小サイズを適用します。 overflow は visible . (この効果は、フレックスアイテムに課される自動最小サイズと類似しています)。

ここでは、フレックスアイテムについて詳しく説明しますが、グリッドアイテムにも当てはまります。

• フレックスアイテムはなぜコンテンツサイズ以上に縮小されないのですか？

この記事では、以下のような潜在的な問題点も取り上げています。 ネストされたコンテナ と既知の 主要ブラウザ間のレンダリングの違い .

レイアウトを修正するには、コードを以下のように調整します。

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;
  min-height: 0;  /* NEW */
  min-width: 0;   /* NEW; needed for Firefox */
}

.day-item {
  padding: 10px;
  background: #DFE7E7;
  overflow: hidden;  /* NEW */
  min-width: 0;      /* NEW; needed for Firefox */
}

jsFiddleデモ

1fr 対 minmax(0, 1fr)

上記の解決策は、グリッドアイテムレベルで動作します。コンテナレベルでの解決策については、この投稿を参照してください。

• 長い要素にminmax(0, 1fr)が効き、1frが効かないのはなぜか？