最小サイズの最大列を備えた自動充填CSSグリッド

Drupal 10は、新しい自動充填CSSグリッドテクニックを導入しており、共有できることを楽しみにしています。

重要な機能は次のとおりです。

• グリッドのデフォルト状態を定義するカスタマイズ可能な最大列カウント。
• 動的列調整：グリッドセルが指定された最小幅を下回ると、グリッドは列数を自動的に削減します。
• 全幅の使用率：グリッドセルは、列番号に関係なく、常にコンテナの幅を埋めるために拡張します。
• JavaScriptフリー、レスポンシブデザイン：JavaScriptなしでさまざまなビューポートサイズにわたって機能します。

アクション中の自動充填グリッド

左のドラッグ可能な要素によって圧縮されたときにグリッドがどのように応答するかを観察します。

コード

実装する準備はできましたか？これがCSSです：

 .grid-container {
  / *ユーザー定義値 */
  -GRID-LAYOUT-GAP：10px;
  -grid-column-count：4;
  -GRID-ITEM  -  min-width：100px;

  / *計算値 */
  -gap-count：calc（var（ -  grid-column-count）-1）;
  -total-gap-width：calc（var（ -  gap-count） * var（ -  grid-layout-gap））;
  -grid-item  -  max-width：calc（（100％ -  var（ -  total-gap-width） / var（ -  grid-column-count））;

  ディスプレイ：グリッド;
  grid-template-columns：repeat（auto-fill、minmax（max（var（ -  grid-item  -  min-width）、var（ -  grid-item  -  max-width））、1fr））;
  グリッドギャップ：var（ -  grid-layout-gap）;
}

自動充填グリッドの理解

このコードは、最新のCSS機能を活用しています：CSS Gridのrepeat() 、 auto-fill() 、およびminmax()関数、およびmax()とcalc() 。

auto-fill()は説明しました

auto-fill()は、行を列で動的に埋めるために重要です。 auto-fill()対auto-fit()に深く掘り下げるには、Sara Soueidanの優れた記事と付随するビデオを参照してください。

max()を使用した列制限の管理

max()関数は、過度の列を防ぎます。各グリッドセルの幅は、最小幅を維持しながら計算された割合を超えないようにします。グリッドギャップの計算アカウント：

 Max（calc（25％ - <grid-gap-for-one-cell>）、100px）</grid-gap-for-one-cell>

これは、CSS変数を使用して達成されます。

 -gap-count：calc（var（ -  grid-column-count）-1）;
-total-gap-width：calc（var（ -  gap-count） * var（ -  grid-layout-gap））;
-grid-item  -  max-width：calc（（100％ -  var（ -  total-gap-width） / var（ -  grid-column-count））;

これにより、列とギャップの数を考慮して、最大幅を動的に計算します。

minmax()で全幅を確保する

minmax()グリッドセルが常に伸びて容器の幅を埋めることを保証します。スペースが許可されている場合、最小幅を設定し、 1fr （分数単位）への拡張を可能にします。

 minmax（<grid-item-width> 、1fr）</grid-item-width>

完全なソリューション

これらの要素を組み合わせると、最終コードは目的の自動充填動作を実現します。

 -gap-count：calc（var（ -  grid-column-count）-1）;
-total-gap-width：calc（var（ -  gap-count） * var（ -  grid-layout-gap））;
-grid-item  -  max-width：calc（（100％ -  var（ -  total-gap-width） / var（ -  grid-column-count））;

grid-template-columns：repeat（auto-fill、minmax（max（var（ -  grid-item  -  min-width）、var（ -  grid-item  -  max-width））、1fr））;

CSSの力

この例は、現代のCSSの高度な機能を紹介しています。 JavaScriptなしで複雑なレイアウトを作成し、CSSの進化を実証しました。

auto-fill()を使用することを提案してくれたAndy Blumに、そしてこれを可能にするためのCSS仕様の作家と実装者に感謝します。

以上が最小サイズの最大列を備えた自動充填CSSグリッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。