<div class="wrapper">
<div><img src="http://zyco.jp/topics/images/trimming.jpg" class="img-width"></div>
<div><img src="http://zyco.jp/topics/images/crop.jpg" class="img-width">
</div>
<div><img src="http://zyco.jp/topics/images/grid-10.jpg" class="img-width"></div>
<div><img src="http://zyco.jp/topics/images/position.jpg" class="img-width"></div>
<div><img src="http://zyco.jp/topics/images/060.gif" class="img-width"></div>
<div><img src="http://zyco.jp/topics/images/tweenmax.jpg" class="img-width"></div>
</div>
.wrapper {
display: grid;
grid-template-columns: minmax(90px, auto) minmax(90px, auto) minmax(90px, auto);
grid-auto-rows: minmax(90px, auto);
background-color: rgba(255, 255, 255, 1);
color: #fff;
gap: 5px;
width: 100%;
}
.wrapper > div {
background-color: rgba(70, 130, 180, 0.6);
padding: 0;
}
.img-width {
width: 100%;
}
自動生成された行の高さと幅の最小値は 90 ピクセル、最大値は auto になる。値に auto を使うと、この行のセルが内容物のサイズに応じて空間が引き伸ばされ、その高さに合わせられる。