JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="container_2">
  <li><img src="https://via.placeholder.com/150/333333/fffffff?text=Inu" class="pic_5_1" alt="画像の説明"></li>
  <li><img src="https://via.placeholder.com/150/333333/fffffff?text=Raion" class="pic_5_2" alt="画像の説明"></li>
  <li><img src="https://via.placeholder.com/150/333333/ffffff/?text=Neko" class="pic_5_3" alt="画像の説明"></li>
  <li><img src="https://via.placeholder.com/150/333333/ffffff/?text=Saru" class="pic_5_4" alt="画像の説明"></li>
  <li><img src="https://via.placeholder.com/150/333333/ffffff/?text=Pengin" class="pic_5_5" alt="画像の説明"></li>
</ul>

CSS

.container_2 {
  display: grid;
  grid-template-rows: 200px 100px 100px 200px;
  grid-template-columns: 300px 300px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.container_2 li {
}

.container_2 li img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}