2 (or more) columns photo grid maintaining aspect ratio - html

Question

Simply in Facebook style, I'd like to do something like this:
I've used CSS flex but I am able to do only in row, not columns.
Total width is the fix dimension, total height and column width have to scale and cover all area. Images have to keep aspect ratio.
My code works with 2 rows. I want the same result with images in columns.
<style>
#main{
width:640px;
margin: 0 auto;
}
.flex-row1, .flex-row2 {
display: flex;
flex-direction: row;
}
.inner {
flex: 1 1 auto;
padding: 0;
margin: 0;
margin-right:2px;
}
.inner.last {
margin-right:0;
position:relative;
}
.flex-row1 .inner{
margin-bottom:2px;
}
img {
max-width:100%;
max-height: 250px;
}
.more-container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
}
.more {
font-family: Tahoma, Geneva, sans-serif;
color: #fff;
font-size: 30px;
}
</style>
<div id="main">
<div class="flex-row1">
<figure class="inner">
<img src="https://www.wemedia.it/cms/wp-content/uploads/2017/03/commodore64-android-640x283.jpg">
</figure>
<figure class="inner last">
<img src="https://www.wemedia.it/cms/wp-content/uploads/2017/02/Esslinger-Frog-Design-Apple-1982-640x480.jpg">
</figure>
</div>
<div class="flex-row2">
<figure class="inner">
<img src="https://www.wemedia.it/cms/wp-content/uploads/2017/04/commodore64-silver-label-640x435.jpg">
</figure>
<figure class="inner">
<img src="https://www.wemedia.it/cms/wp-content/uploads/2017/04/commodore64_sx.jpg">
</figure>
<figure class="inner last">
<img src="https://www.wemedia.it/cms/wp-content/uploads/2017/04/C64_golden_edition-640x500.jpg">
<div class="more-container"><div class="more">+3</div></div>
</figure>
</div>
</div>

Answer 1

.equal-height-container {
max-width: 900px;
margin: 0 auto;
display: flex;
}
.first {
background-color: yellow;
flex: 1;
display: flex;
flex-direction: column;
}
.first-a {
background-color: blue;
flex: 1;
}
.first-b {
background-color: orange;
flex: 1;
}
.second {
background-color: yellow;
flex: 1;
display: flex;
flex-direction: column;
}
.second-a {
background-color: #c0dbe2;
flex: 1;
}
.second-b {
background-color: #cdf1c3;
flex: 1;
}
.second-c {
background-color: red;
flex: 1;
}
<div class="equal-height-container">
<div class="first">
<div class="first-a"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quasi similique amet voluptatem molestiae nostrum ab nesciunt blanditiis repellendus quos, sequi sunt, dolorem quis facilis mollitia nemo modi doloribus quo.</p></div>
<div class="first-b"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam, veritatis ducimus, vero magnam hic quia pariatur asperiores laudantium quod nobis perspiciatis, expedita quo reprehenderit quasi iusto ullam error reiciendis.</p></div>
</div>
<div class="second">
<div class="second-a">A</div>
<div class="second-b">B</div>
<div class="second-c">C</div>
</div>
</div>