How to wrap flexbox over multiple rows and columns?

Question

I'm trying to build a gallery in form of a masonry, but I can't get my head around wrapping of flexboxes?

I got a simple UL list and I've added the style needed, but things are not floating and wrapping as it should.

.masonry {

  margin: 48px -2px;
  padding-left: 0;
  list-style: none;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  display: flex;
}

.masonry li {
	
  height: 300px;
  flex-basis: calc(33.33% - 4px);
  margin: 2px;
  text-align: center;
  display: flex;
  
  background-color: #C9F4FF;
}

.masonry li:nth-child(1), .masonry li:nth-child(7) {

  height: 604px;
  
  background-color: #FFB4FF;
}

.masonry li:nth-child(4), .masonry li:nth-child(4) {

  flex-basis: calc(66.66% - 4px);
  background-color: #B9EDA8;
}

<!-- masonry starts -->
    <ul class="masonry">
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
    </ul>
<!-- masonry ends -->

The result looks like this, which is kinda funny :)

Maybe someone knows how to write the correct CSS to make things wrap correctly?

Answer 1

I've created a quick image gallery from the help I got and have to say it was as simple and neat as I wanted it.

body {
    
    padding: 48px;
    font-family: Helvetica, Arial, sans-serif;
}
.masonry {
    margin: -2px;
    padding-left: 0;
    list-style: none;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    display: flex
}

.masonry li {
    flex-basis: calc(100% / 3);
    position: relative;
    height: 300px;
    display: flex
}

@media (max-width: 1199.98px) {
    .masonry li {
        height: 250px
    }
}

@media (max-width: 991.98px) {
    .masonry li {
        height: 200px
    }
}

@media (max-width: 767.98px) {
    .masonry li {
        flex-basis: calc(100% / 2) !important;
        height: 160px !important
    }
}

.masonry li:nth-child(1) a, .masonry li:nth-child(7) a {
    width: calc(100% - 2px);
    height: calc(200% - 2px);
    position: absolute;
    left: 0;
    top: 0
}

.masonry li:nth-child(4), .masonry li:nth-child(8) {
    flex-basis: 100%
}

.masonry li:nth-child(4) a {
    margin-left: calc((100% / 3) + 1px)
}

.masonry li:nth-child(8) a {
    margin-right: calc((100% / 3) + 1px)
}

.masonry a {
    margin: 1px;
    text-align: center;
    text-decoration: none;
    position: relative;
    color: #fff;
    display: flex;
    flex: 1
}

@media (max-width: 767.98px) {
    .masonry a {
        width: auto !important;
        height: auto !important;
        margin: 1px !important;
        position: relative !important
    }
}

.masonry a:hover {
    text-decoration: none
}

.masonry a:hover img {
    transform: scale(1.04);
    opacity: 1
}

.masonry img {
    transition: opacity .2s, transform .3s;
    opacity: .5
}

.masonry-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

.masonry-caption {
    width: 100%;
    min-width: 0;
    padding: 24px;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow: hidden;
    display: flex;
    z-index: 2
}

@media (max-width: 575.98px) {
    .masonry-caption {
        padding: 0
    }
}

.masonry-caption:hover strong, .masonry-caption:hover span {
    transition: background-color .4s ease-in-out;
    background-color: #000
}

.masonry-caption strong, .masonry-caption span {
    padding: 4px 8px;
    transition: background-color .15s ease-in-out
}

.masonry-caption strong {
    margin-bottom: 8px;
    font-family: "opensans-semibold";
    font-size: 1.625rem
}

@media (max-width: 991.98px) {
    .masonry-caption strong {
        font-size: 1.4rem
    }
}

@media (max-width: 767.98px) {
    .masonry-caption strong {
        margin: 0;
        font-size: 1.1rem;
        background-color: transparent !important
    }
}

@media (max-width: 991.98px) {
    .masonry-caption span {
        font-size: .938rem
    }
}

@media (max-width: 767.98px) {
    .masonry-caption span {
        font-size: .875rem;
        background-color: transparent !important
    }
}

.cover {

    width: 100%;
    max-width: 100%;
    height: inherit;
    object-position: 50% 50%;
    object-fit: cover;
}

<!-- masonry starts -->
    <ul class="masonry">
        <li>
            <a href="" class="masonry-holder" title="">
                <div class="masonry-caption"><strong>Image title</strong><span>label</span></div>
                <div class="masonry-image"><img src="https://farm6.staticflickr.com/5594/15041847508_8e9ef380f9_z.jpg" rel="noindex" class="cover" width="360" height="240" alt=""></div>
            </a>
        </li>
        <li>
            <a href="" class="masonry-holder" title="">
                <div class="masonry-caption"><strong>Image title</strong><span>label</span></div>
                <div class="masonry-image"><img src="https://farm6.staticflickr.com/5559/15225339791_f01c6697b6_z.jpg" rel="noindex" class="cover" width="360" height="240" alt=""></div>
            </a>
        </li>
        <li>
            <a href="" class="masonry-holder" title="">
                <div class="masonry-caption"><strong>Image title</strong><span>label</span></div>
                <div class="masonry-image"><img src="https://farm4.staticflickr.com/3914/15041657969_ac472610cb_z.jpg" rel="noindex" class="cover" width="360" height="240" alt=""></div>
            </a>
        </li>
        <li>
            <a href="" class="masonry-holder" title="">
                <div class="masonry-caption"><strong>Image title</strong><span>label</span></div>
                <div class="masonry-image"><img src="https://farm6.staticflickr.com/5564/15041850517_00f9b6667f_z.jpg" rel="noindex" class="cover" width="360" height="240" alt=""></div>
            </a>
        </li>
        <li>
            <a href="" class="masonry-holder" title="">
                <div class="masonry-caption"><strong>Image title</strong><span>label</span></div>
                <div class="masonry-image"><img src="https://farm6.staticflickr.com/5591/15041649519_f9862e81c9_z.jpg" rel="noindex" class="cover" width="360" height="240" alt=""></div>
            </a>
        </li>
        <li>
            <a href="" class="masonry-holder" title="">
                <div class="masonry-caption"><strong>Image title</strong><span>label</span></div>
                <div class="masonry-image"><img src="https://farm6.staticflickr.com/5596/15228427075_a56b625397_z.jpg" rel="noindex" class="cover" width="360" height="240" alt=""></div>
            </a>
        </li>
        <li>
            <a href="" class="masonry-holder" title="">
                <div class="masonry-caption"><strong>Image title</strong><span>label</span></div>
                <div class="masonry-image"><img src="https://farm4.staticflickr.com/3917/15228055382_58c02657b8_z.jpg" rel="noindex" class="cover" width="360" height="240" alt=""></div>
            </a>
        </li>
        <li>
            <a href="" class="masonry-holder" title="">
                <div class="masonry-caption"><strong>Image title</strong><span>label</span></div>
                <div class="masonry-image"><img src="https://farm6.staticflickr.com/5553/15228056972_9b780d2891_z.jpg" rel="noindex" class="cover" width="360" height="240" alt=""></div>
            </a>
        </li>
    </ul>
<!-- masonry ends -->

Here's a responsive masonry grid made with flexbox, if someone else need a bit inspiration for their work.