Reputation: 663
I want to make something like this:
I would like to do this with the most clean, semantic and responsive layout if is possible.
When I say clean, I refer to something like this.
<div class="gallery">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>etc...</div>
</div>
And use CSS to align, rescale and reposition the items.
PD1: Is this possible with only html+css?
PD2: Is this possible with flexbox?
Upvotes: 0
Views: 232
Reputation: 196306
Well something like that would be to make the flow vertical and allow wrapping.
*{box-sizing:border-box}
.gallery{
display:flex;
flex-direction:column;
flex-wrap:wrap;
height:300px;
width:100%;
}
.gallery > *{
flex:0 0 1;
height:50%;
background:teal;
border:1px solid #000;
color:#fff;
padding:20px;
}
.gallery > :nth-child(5n){
height:100%;
}
<div class="gallery">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
<div>item 5</div>
<div>item 6</div>
<div>item 7</div>
</div>
Upvotes: 1