Created 2022年2月15日14:00
Updated 2022年2月15日14:00
Categories
HTML
このサイトのトップページを弄っていて必要になったので調べました。
要は↓こういう感じにしたかったのです。
こちらのHTMLは以下になります。
<style type="text/css">
<!--
.image_box {
margin: 50px 0;
display: grid;
grid-template-columns: repeat(auto-fit, min(44%, 200px));
grid-gap: min(5%, 40px);
justify-content: center;
}
.popup_image {
width: 100%;
border-radius:30px;
box-shadow: 0 10px 15px 0 rgba(0, 0, 0, .5);
}
-->
</style>
<div class="image_box">
<div><img src="https://blog.sakaki333.com/dynamic/images/358" class="popup_image"></div>
<div><img src="https://blog.sakaki333.com/dynamic/images/360" class="popup_image"></div>
<div><img src="https://blog.sakaki333.com/dynamic/images/363" class="popup_image"></div>
<div><img src="https://blog.sakaki333.com/dynamic/images/361" class="popup_image"></div>
<div><img src="https://blog.sakaki333.com/dynamic/images/362" class="popup_image"></div>
</div>
要素のサイズ指定にmin
関数を使うことで、モバイルで表示しても必ず1行に2要素表示するように工夫しています。
もしよければスニペットとしてお使いください。