完成形

HTML

<div class="wrap">
<img src="images/cloud.JPG" alt="画像" class="wrap__img-1">
<img src="images/sakura.JPG" alt="画像" class="wrap__img-2">
<img src="images/yama.jpg" alt="画像" class="wrap__img-3">
</div>

wrapで画像を囲んでいます｡imgに対して､クラス名を付けています｡このクラスにSCSSをあてます｡

SCSS

.wrap{
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 24px;
margin-left: auto;
margin-right: auto;
&__img-1{
min-height: 500px;
}
&__img-2{
min-height: 350px;
}
&__img-3{
min-height: 200px;
}
img{
object-fit: cover;
}
}

min-heightで最低限の高さを指定｡これ以上､小さくなりません｡これを､各､imgクラスに書きます｡高さを変えれば､画像の高さが変わります｡

CSS

.wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-left: auto;
  margin-right: auto;
}
.wrap__img-1 {
  min-height: 500px;
}
.wrap__img-2 {
  min-height: 350px;
}
.wrap__img-3 {
  min-height: 200px;
}
.wrap img {
  -o-object-fit: cover;
     object-fit: cover;
}

ちなみに､下線は2つです｡SCSSの方が単純ですね｡時代はSCSSなので､勉強されることをおすすめします｡

さいごに

あまり使い道はないか｡単純に並べた方が､収まりがいいです｡ただ､印象的にはなるかも｡ちなみに､スマホ対応もしています｡スマホで見るか､ブラウザの画面を小さくしたり､大きくしたり､して下さい｡レイアウトが崩れないと思います｡