responsive pyramid alignment of blocks

Question

Got stuck on next issue. I need to make a responsive layout of blocks, which would always align themselves as upside-down pyramid without size loss. Is it possible to achieve with some native ways? Without any libraries and frameworks? I tried to acheive that with flexbox, but I failed, because on lower breakpoints, alignment does not fit my requirements. Would be grateful for any advise.

 .pyramid__container { max-width: 1280px; margin: 0 auto; }.pyramid__item { width: 150px; height: 40px; margin: 8px; background: red; box-sizing: border-box; border: 1px solid #000000; }.pyramid__item-container { display: flex; justify-content: center; flex-wrap: wrap; } @media screen and (min-width:960px) {.pyramid__item-container { flex-wrap: nowrap; } }

 <div class="pyramid__container"> <div class="pyramid__item-container"> <div class="pyramid__item item-1"></div> <div class="pyramid__item item-2"></div> <div class="pyramid__item item-3"></div> <div class="pyramid__item item-4"></div> <div class="pyramid__item item-5"></div> <div class="pyramid__item item-6"></div> <div class="pyramid__item item-7"></div> <div class="pyramid__item item-8"></div> </div> <div class="pyramid__item-container"> <div class="pyramid__item item-9"></div> <div class="pyramid__item item-10"></div> <div class="pyramid__item item-11"></div> <div class="pyramid__item item-12"></div> <div class="pyramid__item item-13"></div> <div class="pyramid__item item-14"></div> <div class="pyramid__item item-15"></div> </div> <div class="pyramid__item-container"> <div class="pyramid__item item-16"></div> <div class="pyramid__item item-17"></div> <div class="pyramid__item item-18"></div> <div class="pyramid__item item-19"></div> <div class="pyramid__item item-20"></div> </div> </div>

Answer 1

You can approximate it using inline-block, float and shape-outside. The values are a bit tricky to adjust and they all need to percetange to keep the same layout:

 .box { font-size: 0; /* remove empty spaces */ text-align:center; }.box div { display:inline-block; background:red; width: 10%; margin: 0.5%; font-size: initial; /* reset the font-size */ } /* maintain a fixed ratio for divs */.box div::before { content: ""; display: block; padding-top: 40%; } /**/.box i{ width:50%; }.box i:before { content:""; display:block; padding-top:100%; }.box i:last-of-type { float:right; shape-outside:linear-gradient(to bottom right,#0000 50%,#000 0); }.box i:first-of-type { float:left; shape-outside:linear-gradient(to bottom left,#0000 50%,#000 0); }

 <div class="box"> <i></i> <i></i> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

For the opposite pyramid you simply adjust both gradients (change bottom with top) and reduce the width of the float elements slightly

 .box { font-size: 0; /* remove empty spaces */ text-align:center; }.box div { display:inline-block; background:red; width: 10%; margin: 0.5%; font-size: initial; /* reset the font-size */ } /* maintain a fixed ratio for divs */.box div::before { content: ""; display: block; padding-top: 40%; } /**/.box i{ width:40%; }.box i:before { content:""; display:block; padding-top:100%; }.box i:last-of-type { float:right; shape-outside:linear-gradient(to top right,#0000 50%,#000 0); }.box i:first-of-type { float:left; shape-outside:linear-gradient(to top left,#0000 50%,#000 0); }

 <div class="box"> <i></i> <i></i> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>