CODEWITHSUNDEEP
htmlcss
GhostOrder
GhostOrder

Reputation: 663

How to make a gallery with items of different size

I want to make something like this:

enter image description here

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

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

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

Related Questions