CSS избегать столбца "распространение" в контейнере

Question

Я использую очень простой макет столбцов, используя ширину столбца, равную ширине изображений, находящихся внутри. Проблема в том, что даже с column-gap: 0 между столбцами все равно остается промежуток, когда родительский контейнер не является точным кратным ширине изображения, потому что столбцы «растекаются» по ширине контейнера, а не выталкиваются в середине, как я бы хотел.

Вот скрипка, показывающая мою проблему: https://jsfiddle.net/GaetanL/q16ja0mx/3/

* {
  margin: 0;
  padding: 0;
}

img {
  width: 100px;
}

.wrapper {
  background-color: red;
}

.group {
  column-width: 100px;
  column-gap: 0px;
  text-align: center;
}

.container {
  width: 450px;
  background-color: blue;
}

<div class="container">
  <div class="group">
    <div class="wrapper"><img src="https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"></div>
    <div class="wrapper"><img src="https://i.pinimg.com/originals/5b/b4/8b/5bb48b07fa6e3840bb3afa2bc821b882.jpg"></div>
    <div class="wrapper"><img src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"></div>
    <div class="wrapper"><img src="https://s.w.org/plugins/geopattern-icon/random-post-for-widget.svg"></div>
    <div class="wrapper"><img src="https://images.theconversation.com/files/135969/original/image-20160830-26282-1tt17ym.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=496&fit=clip"></div>
    <div class="wrapper"><img src="https://www.dumpaday.com/wp-content/uploads/2018/06/random-pictures-10.jpg"></div>
    <div class="wrapper"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRYkflEQWLH5gOAEChBRsN0R11n1by_3c24sJRAcGumVARrZ1-k&usqp=CAU"></div>
    <div class="wrapper"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSRKJI1Jhsk6iHIUEdgpL2z5USE6S0B54iBIEUU76r1PHYL1_GV&usqp=CAU"></div>
    <div class="wrapper"><img src="https://miro.medium.com/max/11796/1*IC7_pdLtDMqwoqLkTib4JQ.jpeg"></div>
    <div class="wrapper"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRN0TyKB-bciZuiyX5ZzJyKGhLSjAPh-ZrUkhr6WJXJzY0qkteE&usqp=CAU"></div>
  </div>
</div>

Answer 1

Вы можете решить эту проблему, используя CSS сетку, где вы можете рассмотреть возможность использования repeat(auto-fit, column_width);, а затем вы заставите свой элемент охватывать все столбцы:

img {
  width: 100%;
  display:block; /* remove space between images */
}

.wrapper {
  background-color: red;
  /*display:flex use this to remove all the spaces*/
}

.group {
  column-width: var(--c);
  column-gap: 0px;
  text-align: center;
  grid-column: 1/-1; /* take all the columns*/
}

.container {
  --c:100px; /* column width*/

  width: 450px;
  background-color: blue;
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--c));
  justify-content: center;
  
  /*for the demo, resize and see the result */
  overflow:hidden;
  resize:horizontal;
}

<div class="container">
  <div class="group">
    <div class="wrapper"><img src="https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"></div>
    <div class="wrapper"><img src="https://i.pinimg.com/originals/5b/b4/8b/5bb48b07fa6e3840bb3afa2bc821b882.jpg"></div>
    <div class="wrapper"><img src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"></div>
    <div class="wrapper"><img src="https://s.w.org/plugins/geopattern-icon/random-post-for-widget.svg"></div>
    <div class="wrapper"><img src="https://images.theconversation.com/files/135969/original/image-20160830-26282-1tt17ym.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=496&fit=clip"></div>
    <div class="wrapper"><img src="https://www.dumpaday.com/wp-content/uploads/2018/06/random-pictures-10.jpg"></div>
    <div class="wrapper"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRYkflEQWLH5gOAEChBRsN0R11n1by_3c24sJRAcGumVARrZ1-k&usqp=CAU"></div>
    <div class="wrapper"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSRKJI1Jhsk6iHIUEdgpL2z5USE6S0B54iBIEUU76r1PHYL1_GV&usqp=CAU"></div>
    <div class="wrapper"><img src="https://miro.medium.com/max/11796/1*IC7_pdLtDMqwoqLkTib4JQ.jpeg"></div>
    <div class="wrapper"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRN0TyKB-bciZuiyX5ZzJyKGhLSjAPh-ZrUkhr6WJXJzY0qkteE&usqp=CAU"></div>
  </div>
</div>