ここにはいくつかの質問がありますが、私が探している問題を完全に解決するものではありません。
Web サイトを持っていて、それをしたいとします。デスクトップにはこれが必要です:
＃＃＃それは簡単です。grid-template-columns: 繰り返し (3, 33%) (基本的に)
私が遭遇したことは、単一の列に反転する前に発生しました:
私は
clamp()、minmax() などあらゆる種類のものを試していますが、何も私が望むように機能しません。はい、確かにメディア クエリを使用することもできますが、基本的なレイアウト変更を行うためにメディア クエリが必要ないように、最新の CSS (クランプ、グリッド、minmax など) を使用して真に流動的なグリッド/フレックス レイアウトを作成したいと考えています。
< /p> これが機能しないことはわかっていますが、リクエストの出発点として、私の 100 回の試行のうちの 1 つの単純なバージョンをここに示します :) このバージョンでは、次を使用してrepeat(3) からrepeat(1) に切り替えようとします。クランプ）。
リーリー リーリー
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
より一般的なルールを含む記事全文: https:// css-tricks.com/owned-layouts-fewer-media-queries/
これは、フレックスベースで
を調整するだけです。max(0px, (400px - 100vw)*1000)を使用するアイデアです。100vw(画面サイズ) が400pxより大きい場合、この式は0pxを与えます。逆の場合、各要素の値が非常に大きいと、大きな値が得られます。flex-basisを実行してラッパーを作成します。@メディア (最大幅:400px)を再生するには、400pxCSS グリッドを使用すると、次のようになります:
メディアクエリなしで列の最大数を制御する同様の質問: CSSグリッド - メディアクエリなしの最大列数
上記のソリューションを拡張して、より複雑なケースを検討できます。
6 列から 3 列、そして 1 列に移動する例:
これらの値を理解するには、次の範囲を考慮してください:
リーリー6 列を取得するには、
の範囲の値が必要です。]14.3% 16.7%]の範囲の値が必要です (15%を検討しています) 3 つの列を取得するには、]25% 33.3%](私は30%と考えていました)ギャップを確実に考慮するために、エッジを避けるだけです。
CSS 変数を使用したより一般的なソリューション。
0.1%を追加して、値が必要な列数を取得するのに十分な大きさであり、ギャップに対応できることを確認します。動的な色付けも追加します (関連: 高さまたは幅に基づいて 要素の色を変更する方法は? )
リーリー
リーリー
リーリー
リーリー
フレックスボックスを使用すると、行の最後の項目が利用可能なスペースをすべて占有する、別の (おそらく望ましい) 動作を実現できます。