CSS3 Grid заполняет пространство в последнем ряду

Question

Данная галерея изображений с использованием flex.https://codepen.io/t-book/pen/pqvjjO

На рабочем столе мы получаем 4 столбца.Из-за flex: auto дочерние элементы последней строки делят половину пространства последней строки, но я бы хотел, чтобы они сохранили ширину предыдущих столбцов , как показано здесь .

Как я могу нацелиться на сирот в последнем ряду, если их меньше 4?Я думаю, что я должен был бы дать этим детям flex:inherit.

.pwpswp-gallery {
  margin: 1% auto;
  width:98%;
}

.pwpswp-gallery__inner {
  display: flex;
  width: 100%;
}

.pwpswp-gallery__inner--flex {
  flex-flow: row wrap;
  justify-content: flex-start;
}

.pwpswp-gallery__inner--flex{
  margin-left: -1%; /* Adjustment for the gutter */
}

.pwpswp-gallery__item {
  overflow: hidden;
  margin: 0 0 8px 8px;  /* Some Gutter */
  background-color: #333;
  color: white;
  position: relative;
}

.pwpswp-gallery__item--flex {
  flex: auto;
  height: 350px;
  min-width: 150px;
}

@media only screen and (min-width: 1024px) {
  /* Horizontal masonry bricks on desktop-sized screen */
  .pwpswp-gallery__item--flex:nth-child(4n+1) {
    width: 350px;
  }
  .pwpswp-gallery__item--flex:nth-child(4n+2) {
    width: 325px;
  }
  .pwpswp-gallery__item--flex:nth-child(4n+3) {
    width: 180px;
  }
  .pwpswp-gallery__item--flex:nth-child(4n+4) {
    width: 380px;
  }
}

@media only screen and (max-width: 1023px) and (min-width: 768px) {
  /* Horizontal masonry bricks on tabled-sized screen */
  .pwpswp-gallery__item--flex:nth-child(4n+1) {
    width: 200px;
  }
  .pwpswp-gallery__item--flex:nth-child(4n+2) {
    width: 250px;
  }
  .pwpswp-gallery__item--flex:nth-child(4n+3) {
    width: 120px;
  }
  .pwpswp-gallery__item--flex:nth-child(4n+4) {
    width: 280px;
  }


}

.masonry-img {
 object-fit: cover;
 width: 100%;
 height: 100%;
}

.pwpswp-gallery__caption{
  display: none;
}

<div class="pwpswp-gallery pwpswp-gallery--flex" itemscope="" itemtype="http://schema.org/ImageGallery" data-pswp-options="{&quot;shareEl&quot;:false,&quot;indexIndicatorSep&quot;:&quot; von &quot;,&quot;closeOnScroll&quot;:false,&quot;captionEl&quot;:true,&quot;bgOpacity&quot;:1}">
<div class="pwpswp-gallery__inner pwpswp-gallery__inner--flex">
  <figure class="pwpswp-gallery__item pwpswp-gallery__caption--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/300?image=2" class="masonry-img" alt="Masonry Brick #2"></a><figcaption
        class="pwpswp-gallery__caption pwpswp-gallery__caption--flex" itemprop="caption description">test</figcaption></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/200/500?image=3" class="masonry-img" alt="Masonry Brick #3"></a></figure> 
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/250?image=4" class="masonry-img" alt="Masonry Brick #4"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/450?image=5" class="masonry-img" alt="Masonry Brick #5"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/350?image=6" class="masonry-img" alt="Masonry Brick #6"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/600?image=18" class="masonry-img" alt="Masonry Brick #7"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/700?image=8" class="masonry-img" alt="Masonry Brick #8"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/200?image=19" class="masonry-img" alt="Masonry Brick #9"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/300?image=10" class="masonry-img" alt="Masonry Brick #10"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/420?image=11" class="masonry-img" alt="Masonry Brick #11"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/450?image=12" class="masonry-img" alt="Masonry Brick #12"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/550?image=13" class="masonry-img" alt="Masonry Brick #13"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/640?image=14" class="masonry-img" alt="Masonry Brick #14"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/420?image=15" class="masonry-img" alt="Masonry Brick #15"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/430?image=16" class="masonry-img" alt="Masonry Brick #16"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/340?image=17" class="masonry-img" alt="Masonry Brick #17"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/240?image=27" class="masonry-img" alt="Masonry Brick #18"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/780?image=19" class="masonry-img" alt="Masonry Brick #19"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/470?image=20" class="masonry-img" alt="Masonry Brick #20"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/380?image=21" class="masonry-img" alt="Masonry Brick #21"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/240?image=22" class="masonry-img" alt="Masonry Brick #22"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/900?image=23" class="masonry-img" alt="Masonry Brick #23"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/480?image=24" class="masonry-img" alt="Masonry Brick #24"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/300?image=25" class="masonry-img" alt="Masonry Brick #25"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/400?image=26" class="masonry-img" alt="Masonry Brick #26"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/500?image=27" class="masonry-img" alt="Masonry Brick #27"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/520?image=28" class="masonry-img" alt="Masonry Brick #28"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/920?image=29" class="masonry-img" alt="Masonry Brick #29"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/400?image=30" class="masonry-img" alt="Masonry Brick #30"></a></figure>

</div>
</div> 

Answer 1

Из-за flex: auto у последних строк дети делят половину пространства последней строки, но я бы хотел, чтобы они сохранили ширину предыдущих столбцов

Добавление max-width к элементу сгиба .pwpswp-gallery__item--flex обеспечит, чтобы даже если в строке было только 1–2 элемента, каждый элемент сгиба не растягивался, чтобы соответствовать целому ряду.

.pwpswp-gallery__item--flex {
  flex: auto;
  height: 350px;
  min-width: 150px;
  /*added max-width */
  max-width: 380px;
}

См. Рабочий пример здесь.