Faced a problem with layout. I need a grid of small blocks, using a float or just an inline-block pressed to the left, and the grid itself should always be pressed to the right. Those. the width of the outdoor unit must always remain equal to the width of the content. This can be done, for example, by assigning the same inline-block to it, but the problem is that when the number of indoor units becomes such that they do not fit in one line and go to the next, the width of the external unit becomes 100%, the indentation increases accordingly of the rightmost small block, from the right edge of the screen. Must always remain the same. Is it possible to somehow make such a grid always pressed to the right edge without js hacks?

<div class="grid"> <div style="float:right"></div> <div style="float:right"></div> <div style="float:right"></div> <div style="float:right"></div> </div>

problem

Here it is. In the first picture, what you need: a block whose width depends on the width of the screen, with the grid inside, always pressed to the right edge. On the second and third problems. PS in the figure of columns 5, but it can be any number depending on the width of the external unit.

  • 2
    Why not flex? - MAX
  • And how exactly can this be done with flex? I tried, I had all the same problems. - Nik
  • You will complete your question with a picture (or diagram), where it will be clear where the alignment is. Then you can get the exact answer. In any case, it is better to use flex for grids, but to forget about float as a bad dream. :) - MAX

1 answer 1

And somehow it will not work? For I do not fully understand the essence of the issue, we will understand along the way :)

 .cont { display: flex; flex-wrap: wrap; position: absolute; right: 0; top: 20px; max-width: 300px; min-width: 150px; } .cont>div { width: calc(100% * (1/5) - 10px); height: 50px; background: red; margin: 5px; } 
 <div class="cont"> <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>

  • I tried something similar. Here a minus is that regardless of the width of the screen you have 5 columns in the grid. It is necessary that the number of columns correlates with the width of the block cont. - Nik
  • @Nik by your example and description, I realized that you need cont to accept the width of the content. At the same time on all the examples I saw that you have 5 blocks in a row, so I assumed that this was necessary. - Telion
  • Completed the question. - Nik
  • @Nik And why should the content not fit into the block if the width of the content is equal to the width of the content? - Telion
  • Because the width of the block is not aligned to the width of the content. If, say, you set a fixed block width, then as soon as you have a few lines of blocks, the width of the external one becomes 100% - Nik