メディア クエリを使用しない 3 列のデスクトップから 1 列のモバイル レイアウトへ

Question

ここにはいくつかの質問がありますが、私が探している問題を完全に解決するものではありません。

Web サイトを持っていて、それをしたいとします。デスクトップにはこれが必要です:

＃＃＃それは簡単です。

grid-template-columns: 繰り返し (3, 33%) (基本的に)

しかし、モバイルデバイスではこれが必要です

私が遭遇したことは、単一の列に反転する前に発生しました:

私は

clamp()、minmax() などあらゆる種類のものを試していますが、何も私が望むように機能しません。はい、確かにメディア クエリを使用することもできますが、基本的なレイアウト変更を行うためにメディア クエリが必要ないように、最新の CSS (クランプ、グリッド、minmax など) を使用して真に流動的なグリッド/フレックス レイアウトを作成したいと考えています。 < /p> これが機能しないことはわかっていますが、リクエストの出発点として、私の 100 回の試行のうちの 1 つの単純なバージョンをここに示します :) このバージョンでは、次を使用してrepeat(3) からrepeat(1) に切り替えようとします。クランプ）。

リーリー リーリー

Answer 1

^{より一般的なルールを含む記事全文: https:// css-tricks.com/owned-layouts-fewer-media-queries/}

これは、フレックスベースで max(0px, (400px - 100vw)*1000) を使用するアイデアです。 100vw (画面サイズ) が 400px より大きい場合、この式は 0px を与えます。逆の場合、各要素の値が非常に大きいと、大きな値が得られます。 flex-basis を実行してラッパーを作成します。 @メディア (最大幅:400px) を再生するには、400px

を調整するだけです。

リーリー リーリー

CSS グリッドを使用すると、次のようになります:

リーリー リーリー

メディアクエリなしで列の最大数を制御する同様の質問: CSSグリッド - メディアクエリなしの最大列数

---

上記のソリューションを拡張して、より複雑なケースを検討できます。

6 列から 3 列、そして 1 列に移動する例:

リーリー リーリー

これらの値を理解するには、次の範囲を考慮してください:

リーリー

6 列を取得するには、]14.3% 16.7%] の範囲の値が必要です (15% を検討しています) 3 つの列を取得するには、]25% 33.3%] (私は 30% と考えていました)

の範囲の値が必要です。

ギャップを確実に考慮するために、エッジを避けるだけです。

CSS 変数を使用したより一般的なソリューション。0.1% を追加して、値が必要な列数を取得するのに十分な大きさであり、ギャップに対応できることを確認します。

動的な色付けも追加します (関連: 高さまたは幅に基づいて

要素の色を変更する方法は? )

リーリー リーリー

フレックスボックスを使用すると、行の最後の項目が利用可能なスペースをすべて占有する、別の (おそらく望ましい) 動作を実現できます。

リーリー リーリー