JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Grid z elementami, które mają być kwadratami skalującymi się do szerokości okna, a w nich zeskalowane obrazki</h1>

<div class="grid">
  <div class="item"><img src="https://picsum.photos/200/300" alt=""></div>
  <div class="item"><img src="https://picsum.photos/230/400" alt=""></div>
  <div class="item"><img src="https://picsum.photos/180/100" alt=""></div>
  <div class="item"><img src="https://picsum.photos/190/330" alt=""></div>
  <div class="item"><img src="https://picsum.photos/340/200" alt=""></div>
  <div class="item"><img src="https://picsum.photos/200/300" alt=""></div>
  <div class="item"><img src="https://picsum.photos/230/400" alt=""></div>
  <div class="item"><img src="https://picsum.photos/180/250" alt=""></div>
  <div class="item"><img src="https://picsum.photos/190/330" alt=""></div>
  <div class="item"><img src="https://picsum.photos/340/200" alt=""></div>
</div>

<h1>Tutaj przykład oczekiwanego rezultatu. Narzucono statyczny rozmiar.</h1>

<div class="grid2">
  <div class="item"><img src="https://picsum.photos/200/300" alt=""></div>
  <div class="item"><img src="https://picsum.photos/230/400" alt=""></div>
  <div class="item"><img src="https://picsum.photos/180/100" alt=""></div>
  <div class="item"><img src="https://picsum.photos/190/330" alt=""></div>
  <div class="item"><img src="https://picsum.photos/340/200" alt=""></div>
  <div class="item"><img src="https://picsum.photos/200/300" alt=""></div>
  <div class="item"><img src="https://picsum.photos/230/400" alt=""></div>
  <div class="item"><img src="https://picsum.photos/180/250" alt=""></div>
  <div class="item"><img src="https://picsum.photos/190/330" alt=""></div>
  <div class="item"><img src="https://picsum.photos/340/200" alt=""></div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  grid-template-rows: 1fr;
  grid-gap: 20px;
}
.grid .item {
  background: grey;
  display: flex;
}

.grid .item:before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  padding-bottom: 100%;
}

.grid img {
  object-fit: cover;
  width: 100%;
/*   display: none; */
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  grid-template-rows: 1fr;
  grid-gap: 20px;
}

.grid2 img {
  object-fit: cover;
  width: 200px;
  height: 200px;
}