Может ли CSS заставить сетку фотографий оставаться по центру при уменьшении количества строк?

Question

Лучше всего использовать аналогию текста, выровненного по левому краю, но вместо этого выровнять его по центру.

У меня сетка из двадцати пяти фотографий размером 375px на 375px, охватывающая 100% ширины страницы, которую я хочу оставить центрированной во всех браузерах и устройствах.
Очевидно, что если ширина экрана не кратна 375px У меня есть пустое пространство справа. Я хочу, чтобы пустое пространство было одинаковым с обеих сторон при сохранении максимального количества строк от двух до бесконечности. Я хочу, чтобы фотографии всегда были размером 375 на 375 пикселей.

Я пробовал

.container {
  width: 1140px;
  margin: auto;
}
.image {
  object-fit: cover;
  width:375px;
  height:375px;
  margin: -4px 0 0 0;
}

Это, очевидно, не реагирует на все случаи. Я также пытался использовать @media для каждого случая и несколько превосходных sh решений из других ответов Stack Overflow. Я тоже посмотрел на npm пакеты и Reactstrap без удачи.

Изображения в React (JSX. Не HTML)

  <div class="row">
    {Object.values(apiResponse).map((value, index) => 
    <a target="_blank" rel="noopener noreferrer" href={value.post}>
      <img src={value.image} className="image"/>
    </a>)}
  </div>

Answer 1

Попробуйте использовать поле margin: 0 auto для контейнера и сделать его подходящим для содержимого вместо ширины 100%:

.container {
  max-width:1140px;
  min-width: 375px;
  width: fit-content;
  margin: 0 auto;
  text-align: center;
}

Хитрость? margin: 0 auto; центрирует элемент блока по горизонтали на странице, если он меньше, чем страница. 0 - верхнее и нижнее поле, auto - слева и справа. Авто делает левое и правое равным.

Чтобы использовать его в этом случае, вы также должны определить ширину, отличную от 100% для содержащего блочного элемента (div в примере OP, раздел в моем).

Того же результата можно достичь, еще определив ширину, но присвоив элементу body стиль text-align:center. Недостатком этого является то, что он влияет на всю страницу, а не только на эту сетку в примере OP.