Aligning elements by masonry type?

Question

css

Actually the question is in the title
It is necessary that the elements occupy the entire width of the page. The number of elements is unknown, the height of the elements is also unknown.
I tried to use this package
, but somehow it does not work correctly, I can not understand why.
Elements do not line up correctly

Here is the code

<ngx-masonry>
    <div ngxMasonryItem class="home__calc masonry-item">
    <i class="fa icon fa-calculator"></i>
    <div class="home__calc-wrapper"></div>
    </div>
    <div ngxMasonryItem class="home__calc masonry-item">
    <i class="fa icon fa-calculator"></i>
    <div class="home__calc-wrapper"></div>
    </div>
    <div ngxMasonryItem class="home__calc masonry-item">
    <i class="fa icon fa-calculator"></i>
    <div class="home__calc-wrapper"></div>
    </div>
    ....
    <div ngxMasonryItem class="home__calc masonry-item">
    <i class="fa icon fa-calculator"></i>
    <div class="home__calc-wrapper"></div>
    </div>
</ngx-masonry>

There are no extra styles.

Answer 1

If there are no special requirements for trifles, then you can do it on flexbox, even this is included in the standard bootstrap delivery
https://w3bits.com/labs/css-masonry/