親要素が小さくなるにつれて、パディングサイズを小さくします

Question

セル内に正方形を描画するグリッドがあります。行と列の数があり、グリッド セルを描画し、(配列に従って) 各セルに正方形があるかどうかを確認し、必要に応じて正方形を描画します。 HTML の最終結果は次のようになります: (1 行 3 列があると仮定すると、正方形を持つセルは 2 つだけになります)

リーリー リーリー

行は画面の幅全体を占め、列のサイズはすべての列で同じである必要があり、画面上の列の数に基づいて変更されます (たとえば、列が 5 つある場合は、すべてに幅が指定されている必要があります) 100 ピクセルですが、列が 1000 個ある場合、それらはすべて 10 ピクセル幅になるはずです)。

私の問題は、列サイズの特定のブレークポイントの後にパディングと境界線の半径が奇妙に見えることであり、そのブレークポイントに到達したときにそれらの値を変更したいと考えています。 @container クエリはまだ完全にサポートされていないため、使用できません。

それが役立つ場合は、私は vue 2 を使用しています。ただし、この場合は CSS ソリューションの方が良いと思います。

Answer 1

説明されている問題の解決を試みます:

このシナリオを達成するための条件をより詳しく調査するために、小さなデモを作成しました。

フレックスボックス項目で同等の border:collapse を取得します

.row 要素は引き続き Flexbox コンテナですが、その Flex アイテムには border が設定されておらず、スタイル設定に outline 設定が使用されます。

##アウトラインはスペースをとらないため、別の要素によって生成されたアウトラインと衝突すると「崩壊」します。

したがって、Flex アイテムの境界線を表示しようとするときに、レイアウトがスタイルの奇妙さによって影響を受けないようにするために、このデモでは、これらの境界線をレンダリングするために 2 つの重要な側面のみに依存しています。

柔軟な項目間の

ギャップを設定します
• アウトライン
のサイズを設定して、間に残ったギャップをカバーします。 要素＃＃＃
• リーリー ::after を使用して要素にコンテンツを追加します
さらに、赤い点は

position:absolute

を持つ

::after

疑似要素として適用され、ここでもグリッド レイアウトには何も影響しないことが保証されます。 リーリー ダッシュボード - オプションの探索 そこから、position:fixed

を含む「ダッシュボード」を追加しました。これはページの上部に位置し、次のことを制御できます。

列幅 (px)

: ここで幅を設定し、利用可能なコンテナーのスペースに基づいて行ごとの列数を変更できます。
• 1行あたりの列数: ここでは、利用可能なコンテナスペースに基づいて幅を変更し、1行あたりの列数を設定できます。 幅＃＃＃
• セル間のギャップ (px) : グリッド上のセル間のギャップ
• 赤いドットの表示/非表示を切り替えます。: 赤いドットの表示/非表示を切り替えます。display: none;
完全に依存するグリッド レイアウトは変更されません
• .column 要素サイズ カスタム変数 --col-width で設定 カウンターの表示/非表示を切り替えます: 各フレックス項目の上にカウンターを表示/非表示にします
• これまでの結論: 私たちは気を散らすものを最小限に抑えるよう懸命に努力し、固定サイズのセル

のみに基づいてグリッド レイアウトを正しく設定するために必要なすべての手順を実行しましたが、まだいくつかの問題が残っています。問題 レンダリングの問題。特定の線の境界線サイズにおける一般的な不一致パターンが発生する場合があります。

私が問題を抱えているのはラップトップのディスプレイだけであり、デスクトップのモニターではありません

ので、それは別の要因であると言うべきです。 さまざまなパラメーターを試し、ギャップも考慮してデモの数値を計算しました。適切で安全なレイアウトを使用すると、潜在的な問題を最小限に抑えることができます (たとえば、境界線のサイズを大きくすることもできます)。 Flex レイアウトを使用すると、これ以上のことはできませんでした。

リーリー リーリー リーリー