Можно ли обрезать изображения в CSS 'grid-template-columns', чтобы они были квадратными и при этом оставались отзывчивыми?

Question

У меня есть адаптивная сетка для фотографий, которая отлично работает, когда фотографии квадратные. К сожалению, некоторые фотографии будут выше, чем широкие, и наоборот, поэтому я хочу, чтобы они были обрезанными, чтобы они были квадратными, сохраняли соотношение сторон и были отзывчивыми, как квадратные фотографии.

Если высота выше ширины, то я бы хотел, чтобы ширина составляла 100%, а переполнение по вертикали скрывалось, и наоборот, если для ширины и высоты верно обратное.

Я использую React, поэтому я не знаю, будет ли решение исходить из React, CSS или JQuery.

React
Мои изображения поступают из массива, поэтому для воспроизведения моей ситуации вам может потребоваться заполнить массив URL-адресов изображений для React to карта.

<div className='grid-box'>
  {Object.values(apiResponse.slice(0, (page+1)*6)).map((value, index) => 
  <a target="_blank" rel="noopener noreferrer" href={value.post}>
    <div className="imagex">
      <img src={value.image} className="image"/>
    </div>
  </a>)}
</div>  

CSS

.image {object-fit: cover; width:100%; overflow: hidden; height: auto; position: relative}
.imagex { position: relative;}
.grid-box {display: grid; grid-template-columns: auto auto auto; position: relative;}

НЕ ДУБЛИРОВАТЬ, потому что я попробовал другое популярное решение Stack Overflow для этого с этим CSS, но это создало гигантские изображения, которые вышли из экран.

.imagex{ width:80%; padding-bottom:80%; margin:1em auto; overflow:hidden;
  position:relative; background:#000 }
.imagex image { position:absolute; width:auto; min-width:100%; min-height:100%;}