There is this example picture, I do not know how to make it up so that there are lines separating pictures.

Just need an idea Layout

  • Already saw the question is identical, with the same screen ... And what exactly does not work? - Air
  • I wrote how to make such an arrangement of pictures, but I need to line up the lines separating them - Netahaki
  • 9
    You can just pseudo-elements ... You can border ... You can separate elements ... You can navivat In the canvas ... you can draw in SVG ... A lot of possibilities - Air
  • show your layout without dividing lines - we will help you to move forward. without a code, a completely unfounded discussion is obtained. - AK ♦

1 answer 1

In general, the implementation here depends on the HTML markup, and the HTML markup depends on where it will be used and what will be with the adaptive. It seems to you no matter what the markup will be and where it will be used at all, and the question of adaptability especially does not care. In that case, take my option.

.container { max-width: 1170px; margin: 0 auto; width: 100%; } .row { border-bottom: 1px solid gray; display: flex; justify-content: space-between; padding: 0 7vw; } .col { align-items: center; border-right: 1px solid gray; display: flex; justify-content: center; padding: 1.5vw; width: 25%; } .col:last-child { border-right: none; } img { display: block; height: auto; width: 100%; } 
 <div class="container"> <div class="row"> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> </div> <div class="row"> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> </div> <div class="row"> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> </div> <div class="row"> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> </div> <div class="row"> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> </div> <div class="row"> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> <div class="col"> <img src="http://via.placeholder.com/100x100/4F84DB/FFFFFF" alt=""> </div> </div> </div>