enter image description here

That's the way it is necessary, I do not understand how to impose such an arrangement of pictures with regard to the size of the grid. At least arrange them according to the layout, fit the size.

  • Use flexbox - Vasily Barbashev
  • + there should be a perspective on adaptability. - Evgeny Tupikov
  • How will the sizes of the pictures be set? - Vasily Barbashev
  • images are overlaid through the background. That is, sizes are set only by <div> blocks - Evgeny Tupikov

2 answers 2

Sketched layout.

.container { width: 600px; height: 600px; border: 1px solid; } .flex { display: flex; } .mini-width { min-width: 150px; } .mini-height { min-height: 150px; } .column { flex-direction: column; } .padding { padding: 6px; } .fs { flex: 1; } .pseudo-img { width: 100%; height: 100%; background: red; } 
 <div class="container padding"> <div class="flex column" style="height: 100%;"> <div class="flex fs"> <div class="flex fs column"> <div class="flex mini-height"> <div class="fs padding"> <img class="pseudo-img" /> </div> </div> <div class="flex fs"> <div class="mini-width padding"> <img class="pseudo-img" /> </div> <div class="fs padding"> <img class="pseudo-img" /> </div> </div> </div> <div class="flex column mini-width"> <div class="fs padding"> <img class="pseudo-img" /> </div> <div class="flex mini-height"> <div class="fs padding"> <img class="pseudo-img" /> </div> </div> </div> </div> <div class="flex mini-height"> <div class="mini-width padding"> <img class="pseudo-img" /> </div> <div class="fs padding"> <img class="pseudo-img" /> </div> </div> </div> </div>

Source codepen

  • Thank you very much, Vasily. Now I will try to apply your code. I started reading about flexbox, and I haven’t figured it out yet. - Evgeny Tupikov
  • one
    I broke your layout into blocks with dimensions, setting the range of the minimum height and maximum length. Next, block setting the minimum block + completely remaining space. минимальный блок + оставшееся пространство in each element is repeated, if you look closely - Vasily Barbashev
  • Thanks again, just tweaked the code for yourself, and everything turned out fine) - Evgeny Tupikov

Try something like this

 .border{ border: 1px solid black; } 
 <div style="height:300px;width:300px"> <div style="height:200px"> <div style="width:60%;height:100%;float:left"> <div class="border" style="height:30%"></div> <div style="height:60%"> <div style="float:left;height:100%;width:40%" class="border"></div> <div style="float:right;height:100%;width:40%" class="border"></div> </div> </div> <div style="width:30%;height:100%;float:right"> <div style="height:60%;width:100%" class="border"></div> <div style="height:30%;width:100%" class="border"></div> </div> </div> <div style="height:100px"> <div class="border" style="height:100%;float:left;width:30%;"></div> <div class="border" style="height:100%;float:right;width:60%"></div> </div> </div>

  • I hope the course of my thoughts is clear - akrasnov87
  • now it would be floatat blocks in 2016) People retrain to the right technology, not on crutches - Vasily Barbashev
  • Probably the last time I ever came back in distant 2012) - akrasnov87
  • now let's talk about adaptability, how do you solve the problem with it using your approach) - Vasily Barbashev
  • There is a code with percentages, and the main square can be changed in the css media screen - akrasnov87