<ul class="wrap">
  <li><a class="inner" href="#">
    <div class="image img1">Product image here</div>
    <div class="footer"> footer</div>
    </a> </li>
  <li><a class="inner" href="#">
    <div class="image img2">Product image here</div>
    <div class="footer"> footer</div>
    </a> </li>
  <li><a class="inner" href="#">
    <div class="image img3">Product image here</div>
    <div class="footer"> footer</div>
    </a> </li>
  <li><a class="inner" href="#">
    <div class="image img4">Product image here</div>
    <div class="footer"> footer</div>
    </a> </li>
  <li><a class="inner" href="#">
    <div class="image img5">Product image here</div>
    <div class="footer"> footer</div>
    </a> </li>
  <li><a class="inner" href="#">
    <div class="image img6">Product image here</div>
    <div class="footer"> footer</div>
    </a> </li>
  <li><a class="inner" href="#">
    <div class="image img7">Product image here</div>
    <div class="footer"> footer</div>
    </a> </li>
</ul>

html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
.wrap {
	margin:0 auto;
	padding:0;
	max-width:1680px;
	padding:10px;
	border:1px solid #000;
	list-style:none;
	display:flex;
	flex-wrap:wrap;
}
p {
	margin:0 0 1em
}
.image {
	height:120px;
	background:red;
	margin:10px 0;
	border:1px solid #000;
}
.wrap li {
	vertical-align:top;/* fallback*/
 	display:inline-block;/* fallback*/
	margin:10px 1%;
	min-width:200px;/* doesn't work in ios so use media queries to go to one column */
	flex-direction:column;
	flex:1 0 29%;
	display:flex;
}
.wrap a {
	padding:10px;
	border:1px solid #000;
	width:100%;
	display:flex;
	flex-direction:column;
	flex:1 0 auto;/* important for chrome */
}
.footer {
	margin-top:auto;/* this is important to move footer down*/
	padding:10px;
	background:#333;
	color:#fff;
}
.footer a {color:#fff}
.img1 {height:100px}
.img2 {height:130px}
.img3 {height:160px}
.img4 {height:120px}
.img5 {	height:50px}
.img6 {height:200px}
.img7 {height:100px}