0

I am trying to build a masonry layout that wraps vertically but it isn't working. I don't know if it's because the size of the images or flexbox isn't built for this.

This is my CSS Code

html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 960px;
            height: 80vh;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            column-gap: 0;
        }

        div {
            width: 33.3%;
        }

        img {
            width: 100%;
        }

This is my HTML:

<section class="container">
        <div>
            <img src="warsaw.jpg" alt="">
        </div>
        <div>
            <img src="old%20town%20warsaw.jpg" alt="">
        </div>
        <div>
            <img src="Krakow-Wawel-Castle.jpg" alt="">
        </div>
        <div>
            <img src="warsaw.jpg" alt="">
        </div>
        <div>
            <img src="Krakow-Wawel-Castle.jpg" alt="">
        </div>
        <div>
            <img src="old%20town%20warsaw.jpg" alt="">
        </div>
    </section>
  • It's possible with Flexbox but the rules are a little bit more complicated. Check this [article](https://tobiasahlin.com/blog/masonry-with-css/) – tamarin May 07 '20 at 14:40
  • What would be the best approach for a masonry layout? Is there an easier approad other than Flexbox? –  May 07 '20 at 14:53
  • Depends on what you want exactly. Check this other [article](https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/) which I'm really I glad I discovered right now. – tamarin May 07 '20 at 15:21
  • 1
    Does this answer your question? [CSS-only masonry layout](https://stackoverflow.com/questions/44377343/css-only-masonry-layout) – Rainbow May 07 '20 at 17:19

0 Answers0