「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > CSSグリッド:メディアクエリなしで最大列カウントを設定する方法は?

CSSグリッド:メディアクエリなしで最大列カウントを設定する方法は?

2025-03-05に投稿
ブラウズ:156

CSS Grid: How to Set a Maximum Column Count Without Media Queries?

cssグリッド:メディアクエリのない最大数の列を定義します

質問:変更?このアプローチは、自動フィット列の概念を利用しています:

solution:

1frは、デフォルトの列幅を残りの空間の1回数に設定します。要素は、必要に応じて新しい行に自動的にラップします。 --N:4; / *列の最大数 */ ディスプレイ:グリッド; Grid-Template-Columns:Repeat(auto-fill、minmax(max(200px、100%/var( - n))、1fr)); }

例:

次の例では、グリッドコンテナは最大4列で作成されます。メディアクエリを必要とせずに、画面幅が変化すると。
最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3