I want to make a grid of photos 5x2, which corresponds to the designer's plan. If all the pictures are present, then it is not difficult to implement exactly and as it should, but if the grid collapses for one reason or another (5 pictures do not fit into the line, there are not enough pictures per line out of 5), then difficulties arise. The difficulty is that the first and last picture in the line should rest on the border of the container (.wrapper), thus it is impossible to simply take and use for example the pseudo-class: first-of-type and similar to just remove the extra indent from the last element.

HTML:

<section class="portfolio"> <div class="wrapper"> <ul class="gallery"> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </div> </section>

CSS:

 * { box-sizing: border-box; padding: 0; margin: 0; } .wrapper { margin-right: 140px; margin-left: 140px; } .portfolio .gallery{ list-style-type: none; height: 550px; text-align:center; } .portfolio .gallery > li{ margin-right: 50px; margin-bottom: 50px; width: 280px; height: 250px; background-color: grey; display: inline-block; } /* Обнуление отступа у каждого крайнего элемента*/ /* Ломается при недостаче элементов */ .portfolio .gallery li:nth-of-type(5n) { margin-right: 0; }

How to be?

  • for a start, I would ask the designer how he planned to display such cases. not the task of the maker-up to dream. - Andrey Fedorov
  • @AndreyFedorov There is no possibility, no-name layout. Yes, and I doubt that the designer thought about such moments. - Yes Man
  • @YesMan Can you make your code run? - Vadim Ovchinnikov

2 answers 2

I propose to align the rows of pictures by width, including the last row.

 .portfolio .gallery { text-align: justify; text-align-last: justify; }

And take advantage of Bootstrap's experience: give all the pictures on both sides of the field, and negative fields of the same size to the list. It will look as if the extreme images do not have an indent, and pseudo-classes are not needed for this.

 .portfolio .gallery { margin-left: -50px; margin-right: -50px; } .portfolio .gallery > li { margin-left: 50px; margin-right: 50px; }

It turns out, for example, like this: http://codepen.io/glebkema/pen/EZjOXB

 * { box-sizing: border-box; padding: 0; margin: 0; } .wrapper { background-color: #eee; margin-right: 140px; margin-left: 140px; } .portfolio .gallery { list-style-type: none; margin-left: -50px; margin-right: -50px; text-align: justify; text-align-last: justify; } .portfolio .gallery > li { margin-left: 50px; margin-right: 50px; margin-bottom: 50px; width: 280px; height: 250px; background-color: grey; display: inline-block; } 
 <section class="portfolio"> <div class="wrapper"> <ul class="gallery"> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </div> </section>

    Answer your own question.

    Alternatively, you can leave indents to the right, but shift the container with pictures to the left to the left to the same length.

     .portfolio .gallery{ list-style-type: none; height: 550px; text-align:center; position: relative; left: -50px; }

    From this, however, other problems arise, but this is another story.

    If you have thoughts on how to do better, write.