Flexbox Gallery With Wrapping

user_18164626 0
Viewed 72

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>

flexbox media-queries css html
2 Answers

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>

user_164963570

Your HTML elements are set up incorrectly. To achieve what you want, you shouldn't put in the same element "first" and "fourth". While it looks good on desktop, you won't be able to put element "second" or "third" between them. You will only be able to change the position of those elements inside of the . Very basic HTML and CSS stuff.

I would advise you to rename class "column" to "cell" and put them in order:

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

And of course in your CSS file change the .column to .cell

This way you will achieve your wanted responsive look on tablet and mobile.

user_181639270
Related