グリッドの横の境界線を整列する

Question

私はCSSのウィザードグリッドに似た何かを使用しています。私は別々のグリッド項目間で水平の境界を揃えようとしています。上部の画像は常に同じサイズです。ほとんどの場合、別々の枠線が並んでいますが、グリッドはピクセルよりも細かいパーセンテージで動作するため、いくつかの画面サイズでは境界線がずれることがあります（下記のブログ第3条参照）。

小さいスクリーンサイズでは、グリッドが行の上に、次に行の上に凝縮するため、<hr>を使用することはできません。私はjavascriptを使用しないレスポンシブルなソリューションが必要です。私は必ずしもこれを行う方法のコード例ではなく、アプローチを必要とします。

Answer 1

あなたが表示を検討することができます：フレックス

.container { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    width: 50%; 
 
} 
 
.container .item { 
 
    background: green; 
 
    border: 1px solid black; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
.bb { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    border-top: 1px solid black; 
 
    padding: 10px; 
 
    border-bottom: 1px solid black; 
 
    margin-top: 20px; 
 
    width: 50%; 
 
}

<div class="container"> 
 

 
    <div class="item"></div> 
 

 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div> 
 
<div class="bb"> 
 
    <div> 
 
    item1 
 
    </div> 
 
    <div> 
 
    item2 
 
    </div> 
 
    <div> 
 
    item3 
 
    </div> 
 
</div>

希望を、これは