Can you use flexbox's wrap-reverse to reverse a series of divs in a grid but still have a complete top row?

Question

Here's a simple example of my problem.

https://codepen.io/yonatanmk/pen/NMRmLq

I have a series of divs that I would like to display in a 4 column grid but in the reverse order starting with the santa cat on the top left.This seems like a job for flex-wrap: wrap-reverse; but using flexbox results in an incomplete top row. I would prefer to have a incomplete bottom row like you would have if you did not reverse the div order.

Should I try something other than flexbox?

Thank you

Here's my code:

HTML

<div class="container">
  <div class="item">
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </div>
  <div class="item">
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </div>
  <div class="item">
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </div>
  <div class="item">
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </div>
  <div class="item">
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </div>
  <div class="item">
    <img src="http://www.wallpapermania.eu/images/lthumbs/2012-04/412_kitty-cat.jpg" />
  </div>
</div>

CSS

body {
  background-color: #2d2d2d;
}

.container {
  width: 1024px;
  display: flex;
  flex-wrap: wrap-reverse;
  background-color: #ffffff;
  padding: 1em;
  margin: 1em auto;

  .item {
    height: 10em;
    width: 24%;
    padding: 0.5em;
    box-sizing: border-box;
    border: 1px solid black;

    img {
      width: 100%;
    }
  }
}

Answer 1

flex-wrap: wrap-reverse only wraps the content along the cross axis in reverse.

You will also want to add: flex-direction: row-reverse to layout the content along the main axis in reverse.

This still leaves you with a problem when the item count is not a multiple of four. To fix this we could add a margin to the last element depending on the count of items by using the nth-last-child and first-child css selectors.

  :nth-last-child(4n+3):first-child {
    margin-right: 25%;
  }

  :nth-last-child(4n+2):first-child {
    margin-right: 50%;
  }

  :nth-last-child(4n+1):first-child {
    margin-right: 75%;
  }

The full CSS:

body {
  background-color: #2d2d2d;
}

.container {
  width: 1024px;
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse;
  background-color: #ffffff;
  padding: 1em;
  margin: 1em auto;

  :nth-last-child(4n+3):first-child {
    margin-right: 25%;
  }

  :nth-last-child(4n+2):first-child {
    margin-right: 50%;
  }

  :nth-last-child(4n+1):first-child {
    margin-right: 75%;
  }

  .item {
    height: 10em;
    width: 25%;
    padding: 0.5em;
    box-sizing: border-box;
    border: 1px solid black;

    img {
      width: 100%;
    }
  }
}

Updated Codepen here: https://codepen.io/roboreilly/pen/ZoBZge

Answer 2

Since you're using sass, maybe you can do something like this if you can anticipate the max number of list items you'll have (10 in this case):

@for $i from 0 through 10 {
  .container .item:nth-child(#{$i}) {
    order: -$i;
  }
}

I modified your code here