Hello! How to make an adaptive grid of such a plan? Without resorting to frameworks I tried a large block on a float - not what you need. Is it possible to implement this on flexes? What would be adaptive. Thank.

enter image description here

  • similar ru.stackoverflow.com/questions/574051/… - akrasnov87
  • @ akrasnov87 thanks, I will try - Atomrr
  • one
    Not enough information about your task. What exactly is your problem? What do you think it means “to be adaptive”? You and we should understand: how blocks should be rebuilt; which of them have a fixed height, and which will "pull". I see several layout options: 1. float; 2. flexs; 3. columns; <del> 4. mesh </ del>. The last option is "for growth". - tutankhamun
  • @tutankhamun Sorry. Small blocks fixed, large rubber block. When resize - a large block remains in the same row, pushing the small ones. When it doesn’t fit in the width of the screen - resized - Atomrr
  • @tutankhamun rightly said. Complete the question, specify - what should be pulled, what should be pressed, what is fixed - and get a detailed answer in the bull's eye. And so - you can only pofludit .. - Goncharov Alexander

1 answer 1

Here's an option, like for example:

*{ box-sizing: border-box; } .row { display: flex; align-items: stretch; align-content: space-between; justify-content: space-between; flex-flow: row nowrap; } .row-wrap { flex-flow: row wrap; } .bit-12 { width: 70%; } .bit-2 { width: 50%; } .bit-21 { width: 30%; } .bit-1 { width: 100%; } .bit-1, .bit-2 { height: 150px; } .bit-3 { height: 310px; } /* Доп. стили для стилизации */ .wrap { background: #777; padding: 1rem; margin: 0 auto; } [class*="bit-"] { padding: .25rem; } .bit-12, .bit-21 { background: transparent; padding: 0; } .img { background: deepskyblue; height: 100%; } 
 <div class="wrap"> <div class="row"> <div class="bit-12 row row-wrap"> <div class="bit-2"> <div class="img"></div> </div> <div class="bit-2"> <div class="img"></div> </div> <div class="bit-2"> <div class="img"></div> </div> <div class="bit-2"> <div class="img"></div> </div> <div class="bit-2"> <div class="img"></div> </div> <div class="bit-2"> <div class="img"></div> </div> </div> <div class="bit-21"> <div class="bit-3"> <div class="img"></div> </div> <div class="bit-1"> <div class="img"></div> </div> </div> </div> </div>