TL;DR: CSSグリッドのためのtable-layout: fixed
のようなものはありますか?
月は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
または visible
以外の値を持つ overflow
に設定することで、この動作をオーバーライドすることができます。
仕様書より:
6.6.6 グリッドアイテムの自動最小サイズ]() > 本仕様では、グリッドアイテムのデフォルト最小サイズをより合理的にするために 6.6.6. グリッドアイテムの自動最小サイズ]() > > グリッドアイテムのデフォルトの最小サイズをより合理的なものにするために、この仕様では
auto
値のmin-width
/min-height
に加えて、overflow
がvisible
であるグリッドアイテムに指定された軸の自動最小サイズを適用することを定義します。この仕様は、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 */
}
上記のソリューションは、グリッドアイテムレベルで動作します。コンテナレベルでの解決策については、こちらの記事をご覧ください。
既存の回答でほとんどのケースが解決しました。しかし、私は、グリッドセルのコンテンツを 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;
トップ0;
left: 0;です。
右: 0
下0;
padding:10pxです。
background: rgba(0,0,0,0.1);
}