you need to build the blocks in 2 rows, while so that each of them is 25% wide of the screen width, and the height is dynamically changed with the width (so that with any extension you get a square).

When reducing the screen, let's say reaching 700px, these 8 blocks should line up in 4 rows of 2 blocks. I searched for info in Google, I did not find it (I found it, but I don’t know how to adapt myself because of my inexperience). I would be very happy to help!

Thank you in advance!

.our-projects { width: 100%; height: 699px; } .wrap-projects { display: flex; flex-direction: column; width: inherit; height: inherit; background: #cec; } .projects-items { display: flex; width: 1365px; min-width: 1365px; margin: 0 auto; flex-wrap: wrap; height: 599px; background: #cee; } .proj-item { display: flex; flex-direction: row; width: 25%; height: 50%; background: #fef; } 
 <section class="our-projects"> <div class="wrap-projects"> <div class="projects-items"> <div class="proj-item"> <a href="#"><img src="../images/img-proj1.jpg" alt=""></a> </div> <div class="proj-item"> <a href="#"><img src="../images/img-proj2.jpg" alt=""></a> </div> <div class="proj-item"> <a href="#"><img src="../images/img-proj3.jpg" alt=""></a> </div> <div class="proj-item"> <a href="#"><img src="../images/img-proj4.jpg" alt=""></a> </div> <div class="proj-item"> <a href="#"><img src="../images/img-proj5.jpg" alt=""></a> </div> <div class="proj-item"> <a href="#"><img src="../images/img-proj6.jpg" alt=""></a> </div> <div class="proj-item"> <a href="#"><img src="../images/img-proj7.jpg" alt=""></a> </div> <div class="proj-item"> <a href="#"><img src="../images/img-proj8.jpg" alt=""></a> </div> </div> <div class="more-projects" style="display:flex;height:100px;width:inherit;background-color: #ce2;"> </div> </div> </section>

    2 answers 2

     .wrapper, .other { display: inline-block; } .wrapper { width: 80%; } .block { display: flex; justify-content: space-around; flex-wrap: wrap; } .block div { flex-basis: 25%; height: 80px; margin: 10px; background-color: #ff9700; } .other { display: inline-block; width: 18%; height: 40px; background-color: purple; } 
     <div class="wrapper"> <div class="block"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="other"> </div>

      Example

       * { padding: 0; margin: 0; box-sizing: border-box; } .b-row { display: flex; justify-content: space-around; flex-wrap: wrap; } .b-col { width: calc(25% - 20px); margin: 10px; } .b-item { background-color: #ccc; padding-bottom: 100%; position: relative; } @media screen and (max-width: 700px) { .b-col { width: calc(50% - 20px); } } 
       <div class="b-row"> <div class="b-col"> <div class="b-item"></div> </div> <div class="b-col"> <div class="b-item"></div> </div> <div class="b-col"> <div class="b-item"></div> </div> <div class="b-col"> <div class="b-item"></div> </div> <div class="b-col"> <div class="b-item"></div> </div> <div class="b-col"> <div class="b-item"></div> </div> <div class="b-col"> <div class="b-item"></div> </div> <div class="b-col"> <div class="b-item"></div> </div> </div>