検索

ホームページ  >  に質問  >  本文

コンテンツの拡張を制限するグリッド項目

<p><strong>TL;DR:</strong> CSS グリッド レイアウト用の <code>table-layout:fixed</code> に似たプロパティはありますか? </p>
<p>月を表す大きな 4x3 グリッドと、日付を表す 7x6 グリッドが内部にネストされた年表示カレンダーを作成しようとしています。 </p> <p>カレンダーはページ全体を埋める必要があるため、年のグリッド コンテナーの幅と高さは 100% に設定されます。 </p> <pre class="brush:php;toolbar:false;">.year-grid { 幅: 100%; 高さ: 100%; 表示: グリッド; グリッドテンプレート:repeat(3, 1fr) /repeat(4, 1fr); } .month-grid { 表示: グリッド; グリッドテンプレート:repeat(6, 1fr) /repeat(7, 1fr); }</pre> <p>これが実際の例です: https://codepen.io/loilo/full/ryXLpO/</p> <p>わかりやすくするために、この例の各月は 31 日で、月曜日から始まります。 </p> <p>問題を説明するために、非常に小さいフォント サイズも選択しました。</p> <p>ページ上には数百の日付セルがあるため、グリッド項目 (つまり、日付セル) は非常にコンパクトです。また、日付ラベルが大きくなりすぎると (この例では、左上隅にあるボタンを自由に使用してフォント サイズを調整できます)、グリッドが大きくなり、ページの境界を超えます。 </p> <p>この動作を防ぐ方法はありますか? </p> <p>もともと年のグリッドの幅と高さを 100% に設定していたので、そこから始めるのかもしれませんが、このニーズを満たすグリッド関連の CSS プロパティが見つかりません。 </p> <p><em>免責事項:</em>CSS グリッド レイアウトを使用せずに、このカレンダーのスタイルを設定する簡単な方法があることは知っています。ただし、この質問は特定の例に言及するというよりも、トピックに関する一般的な知識に関するものです。 </p>
P粉199248808P粉199248808503日前556

全員に返信(2)返信します

  • P粉304704653

    P粉3047046532023-08-21 13:34:12

    前の回答は非常に優れていますが、グリッドの場合もレイアウトを修正する同等の方法があることにも言及したいと思います。代わりに、トラックを minmax(0, 1fr ) とみなすだけです。 1frの。

    返事
    0
  • P粉818088880

    P粉8180888802023-08-21 00:00:55

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

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

    これを行うには、グリッド項目を min-width: 0、min-height: 0 または overflow (visible を除く) に設定します。 以外の任意の値) を使用して、この動作をオーバーライドします。

    仕様より:

    ここでは、フレックス項目をカバーするさらに詳しい説明ですが、グリッド項目にも当てはまります:

    この記事では、ネストされたコンテナに関する潜在的な問題と、主要なブラウザ間の既知の レンダリングの違いについても説明します。

    レイアウトを修正するには、コードに次の調整を加えます:

    リーリー

    jsFiddle のデモ

    1fr および minmax(0, 1fr)

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

    返事
    0
  • キャンセル返事