I caught a stupor at such a moment, I have several blocks in one line, each has a border of 1 px , but the trouble is, what about the place where these blocks fit, the border visually takes 2px . I want to visually all the lines were in 1px

 *{ padding: 0; margin: 0; box-sizing: border-box; } .container{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; padding: 25px 0; } .item{ width: 25%; height: 100px; border: 1px solid #000; background: silver; } 
 <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

  • For elementary vertical borders, zero border-left or border-right for all but the first / last. But for the horizontal somehow I do not even know - andreymal
  • margin -1px from the right sides, but still flexing the flex to match the desired result ... - Qwertiy ♦

3 answers 3

If IE support is not needed

 *{ padding: 0; margin: 0; box-sizing: border-box; } .container{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; padding: 25px 1px; } .item{ width: 25%; height: 100px; outline: 1px solid #000; background: silver; } 
 <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

If the first row is guaranteed to be filled

 *{ padding: 0; margin: 0; box-sizing: border-box; } .wrapper{ padding:25px 0; } .container{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; border-top:1px solid #000; border-left:1px solid #000; } .item{ width: 25%; height: 100px; border-right:1px solid #000; border-bottom:1px solid #000; background: silver; } 
 <div class="wrapper"> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </div>

  • Thank you, it’s embarrassing about the outline, but I didn’t know - Vearo

That's how you can decide. The padding container will then need to be removed, or within the container another div, to be made to which to apply this approach.

 *{ padding: 0; margin: 0; box-sizing: border-box; } .container{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; border-top:1px solid #000; border-left:1px solid #000; } .item{ width: 25%; height: 100px; border-right: 1px solid #000; border-bottom: 1px solid #000; background: silver; } 
 <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

  • @Gennadiy Zhurov Anyway, thank you very much - Vearo

There is an option to make the same picture without a border. In the sense of general-)) And it will look like it should.

 *{ padding: 0; margin: 0; box-sizing: border-box; } .container{ width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 1px; background: #000; padding: 25px 0; } .item{ width: 100%; height: 100px; background: silver; } 
 <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>