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

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グリッドレイアウトを使用せずに、そのカレンダーのスタイルを設定する簡単な方法があることを知っています。ただし、この質問は、具体的な例を解くというよりは、トピックに関する一般的な知識に関するものです。

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

グリッドアイテムの初期サイズは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 */
}

改訂されたコードペン

1fr 対 minmax(0, 1fr)

上記のソリューションはグリッドアイテムレベルで動作します。コンテナーレベルのソリューションについては、次の投稿を参照してください。

• 長い要素に対してminmax（0、1fr）が機能するのに、1frが機能しないのはなぜですか？

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

既存の回答はほとんどの場合を解決します。ただし、グリッドセルのコンテンツをにする必要がある場合がありますoverflow: visible。私は次のように、ラッパー内に絶対的に配置することで解決しました（理想的ではありませんが、私が知っている最良のものです）。

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;  
}

.day-item-wrapper {
  position: relative;
}

.day-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;

  background: rgba(0,0,0,0.1);
}

https://codepen.io/bjnsn/pen/vYYVPZv

簡単な方法は、グリッドアイテムの最大幅を次のように設定することです。

//for the container
.gridContainer{
    display: grid;
    grids-templates-column: repeat (12, 1fr);
 }

 //for the grid item
 .gridItem{
       max-width: 100%;
       grid-column: span 4  //4 can be any number from1-12 as we specified in the grid template
  }