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

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

フレックスボックス項目で同等の 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 レイアウトを使用すると、これ以上のことはできませんでした。

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