Flexbox Gallery With Wrapping

Question

I am trying to create a responsive image gallery for my website using a flexbox. However, I am trying to make it wrap to the next line and stay in order, which I am having trouble with. For example:

Desktop
1,2,3
4,5,6 etc
Tablet
1,2
3,4 etc
Mobile
1
2 etc

Please see the example code I included.

.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 33%;
  max-width: 33%;
}

.column img {
  vertical-align: middle;
  width: 100%;
}

@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

<div class="row">
  <div class="column">
    <figure>
      <img src="https://img.webnots.com/2014/04/112.png">
      <figcaption>Caption 1</figcaption>
    </figure>
    <figure>
      <img src="https://img.webnots.com/2014/04/42.png">
      <figcaption>Caption 4</figcaption>
    </figure>
  </div>
  <div class="column">
    <figure>
      <img src="https://img.webnots.com/2014/04/22.png">
      <figcaption>Caption 2</figcaption>
    </figure>
    <figure>
      <img src="https://img.webnots.com/2014/04/52.png">
      <figcaption>Caption 5</figcaption>
    </figure>
  </div>
  <div class="column">
    <figure>
      <img src="https://img.webnots.com/2014/04/32.png">
      <figcaption>Caption 3</figcaption>
    </figure>
    <figure>
      <img src="https://img.webnots.com/2014/04/62.png">
      <figcaption>Caption 6</figcaption>
    </figure>
  </div>
</div>

Answer 1

The first thing I would do is nest it in a container. Flex works in order of the markup so I switched your order back to the correct numerical order. Then, what I would do is nest each of your figure's in their own div. I just used your column div to demonstrate. Then remove the media queries and let flex do its thing.

The main issue was you were trying to split them up in rows of 3 but had 2 nested per div, and were trying to set max-width to the div. To have a row of 3 they should be nested in their own div's with width: 33%;

EDIT ~ I made the min-width: 200px;because your image renders at about 160px. 200px would be a good breaking point on mobile devices. Check your dev tools for mobile.

.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  min-width: 200px;
  width: 33.33%;
}

.container {
  margin: auto;
  width: 100%;
}

<div class="container">
  <div class="row">
    <div class="column">
      <figure>
        <img src="https://img.webnots.com/2014/04/112.png">
        <figcaption>Caption 1</figcaption>
      </figure>
    </div>
    <div class="column">
      <figure>
        <img src="https://img.webnots.com/2014/04/42.png">
        <figcaption>Caption 2</figcaption>
      </figure>
    </div>
    <div class="column">
      <figure>
        <img src="https://img.webnots.com/2014/04/22.png">
        <figcaption>Caption 3</figcaption>
      </figure>
    </div>
    <div class="column">
      <figure>
        <img src="https://img.webnots.com/2014/04/52.png">
        <figcaption>Caption 4</figcaption>
      </figure>
    </div>
    <div class="column">
      <figure>
        <img src="https://img.webnots.com/2014/04/32.png">
        <figcaption>Caption 5</figcaption>
      </figure>
    </div>
    <div class="column">
      <figure>
        <img src="https://img.webnots.com/2014/04/62.png">
        <figcaption>Caption 6</figcaption>
      </figure>
    </div>
  </div>
</div>