Good afternoon, dear advisers.

There is a grid of images. I can not put it right, maybe someone will tell you how to approach the task? This is what happens now: http://codepen.io/shugich/pen/MejMQw

section { width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; } div { width: 490px; height: 450px; background: #000; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 50px; font-weight: bold; font-family: 'Helvetice', 'Arial', sans-serif; margin-bottom: 20px; } .small { height: 215px; } 
 <section> <div>1</div> <div class="small">2</div> <div class="small">3</div> <div class="small">4</div> <div>5</div> <div>6</div> <div>7</div> <div class="small">8</div> <div class="small">9</div> <div class="small">10</div> </section>

Grid

  • I know about Masonry, but I would like to do it without using js. - dmitryshishkin
  • There is no need to customize for everyone. There are only two sizes: 490 × 450 pixels and 490 × 215 pixels. The indentation between the images is 20 pixels both at the side and at the bottom. - dmitryshishkin
  • I also know the approach through the columns, but it doesn’t fit because there is no such order of images, and this is important. - dmitryshishkin
  • It is not that. There the grid is differently constructed. - dmitryshishkin
  • @DmitryShishkin, is the markup constant? or the number and order may vary? - Grundy

1 answer 1

I found a solution. It does not quite match the task because the fourth and fifth pictures are reversed, but this also suits me. Here is the solution: http://codepen.io/shugich/pen/qNazGx

The expression 10n + 4 and 10n + 7 I use because more images can be added to this stream. With this approach, they will always be inserted on this grid.

 section { width: 1000px; margin: 0 auto; } .wrapper { overflow: hidden; margin: 0 -10px -20px; } .item { width: 490px; height: 450px; background: #000; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 50px; font-weight: bold; font-family: 'Helvetice', 'Arial', sans-serif; margin: 0 10px 20px; float: left; } .small { height: 215px; } .item:nth-child(10n + 4), .item:nth-child(10n + 7) { float: right; } 
 <section> <div class="wrapper"> <div class="item">1</div> <div class="item small">2</div> <div class="item small">3</div> <div class="item">4</div> <div class="item small">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item small">8</div> <div class="item small">9</div> <div class="item small">10</div> </div> </section>