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 グリッド レイアウトを使用せずにカレンダーのスタイルを設定する簡単な方法があることは承知しています。ただし、この質問は具体的な例を解決することよりも、トピックに関する一般的な知識に関するものです。
ベストアンサー1
デフォルトでは、グリッド項目はそのコンテンツのサイズよりも小さくすることはできません。
グリッド項目の初期サイズはmin-width: autoおよび ですmin-height: auto。
この動作は、グリッド項目を に設定するかmin-width: 0、以外の値に設定することで上書きできます。min-height: 0overflowvisible
仕様より:
グリッド項目のより合理的なデフォルトの最小サイズを提供するために、この仕様では、/
autoの値が、 であるグリッド項目に指定された軸の自動最小サイズも適用することを定義します。(効果は、フレックス項目に課される自動最小サイズに類似しています。)min-widthmin-heightoverflowvisible
以下はフレックス アイテムに関するより詳細な説明ですが、グリッド アイテムにも適用されます。
この投稿では、ネストされたコンテナーの潜在的な問題と、主要なブラウザー間の既知のレンダリングの違いについても説明します。
レイアウトを修正するには、コードを次のように調整します。
.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)
上記のソリューションはグリッド アイテム レベルで動作します。コンテナー レベルのソリューションについては、次の投稿を参照してください。