web-dev-qa-db-ja.com

コンテンツがグリッドアイテムを展開しないようにする

TL; DR：CSSグリッドにtable-layout: fixedのようなものはありますか？

私は、月に4×3の大きなグリッドを、そしてその日に7×6のグリッドを入れ子にして、年間ビューカレンダーを作成しようとしました。

カレンダーがページいっぱいに表示されるので、年グリッドコンテナの幅と高さはそれぞれ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グリッドレイアウトを使わずに、そのカレンダーを簡単にスタイル設定する方法があることを私は知っています。ただし、この質問は、具体例を解くことよりもトピックに関する一般的な知識に関するものです。

csscss3grid-layoutcss-grid
96
Loilo

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

グリッド項目の初期サイズはmin-width: autoとmin-height: autoです。

グリッド項目をoverflow以外の値でmin-width: 0、min-height: 0、または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 */
}

改訂codepen

1frとminmax(0, 1fr)

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

167
Michael_B

前の答えはかなり良いのですが、がグリッドと同等の固定レイアウトであることにも言及したかったので、1frの代わりにminmax(0, 1fr)を書く必要があります。あなたのトラックサイズとして。

26
FremyCompany