CSSで複数要素を中央に並べつつ、2段以上になった際に子要素だけ左に配置する

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要素表示するように工夫しています。

もしよければスニペットとしてお使いください。

コメントを投稿

コメント