CSSで画像を複数画像をグリッドに、1枚の画像の場合は中央表示にしたい。

前提・実現したいこと

分かりづらいタイトルで申し訳ございません。
画像を見ていただけると分かりやすいと思います。
(1枚目が現状、2枚目が理想的なグリッドレイアウトです。)

該当のソースコード

.親{
    display: flex;
    flex-wrap: wrap;
    height:auto;
    padding-bottom:20px;
}

.子{
    margin: 0 auto;
    width:420px;
    height:400px;
    object-fit: cover;
    border-radius: 8px;
}

発生している問題

どうしても真ん中に隙間が空いてしまう。
上下左右均等の間隔で配置したい。（中央寄せのようなイメージです。）

試したこと

display:grid;も自分なりに試してみましたが、
システム上、取得する枚数が1枚の可能性もあり、1枚だった場合に中央に寄せることが出来ませんでした。

どうかアイデアとヒントをいただければと思います。よろしくお願いします。

追記

Jon_do

2021/08/12 02:22

１枚めも2枚目も真ん中に隙間があるように見えます。キッチリ隙間を詰めなくても良いのでしょうか？ 1枚の場合は中央に寄せるとありますが、画像の大きさは４枚の時と同じ大きさで良いのでしょうか？また、２枚の場合 3枚の場合はありますか？

bbbbi2yoi

2021/08/12 03:03

＞１枚めも2枚目も真ん中に隙間があるように見えます。キッチリ隙間を詰めなくても良いのでしょうか？説明不足ですみません。はい、1枚目の場合は縦にだけ隙間ができてしまうので　そういう意味での「均等な間隔で配置したい」という説明になってます。なので、Jonさんの解釈で合っております。＞1枚の場合は中央に寄せるとありますが、画像の大きさは４枚の時と同じ大きさで良いのでしょうか？また、２枚の場合 3枚の場合はありますか？はい、追記させていただきました。

行動規範の内容に同意します

回答2件

一例です。Javascriptを使いました。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 210px;
            height: 210px;
            position: relative;
            top:50vh;
            transform: translateY(-50%);
            margin: 0 auto;
            font-size: 0;
            background-color: aqua;
        }

        .img {
            display: inline-block;
            position: absolute;
        }

        /* 画像を1枚取得した場合のclass */

        .onePict {
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }

        /* 画像を2枚取得した場合のclass */

        .twoPict1 {
            top:50%;
            transform: translateY(-50%);
        }

        .twoPict2 {
            top:50%;
            right: 0;
            transform: translateY(-50%);
        }

        /* 画像を3枚取得した場合のclass */

        .threePict2 {
            right:0;
        }

        .threePict3 {
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
        }

        /* 画像を4枚取得した場合のclass */

        .fourPict2 {
            right: 0;
            top:0;
        }

        .fourPict3 {
            left: 0;
            bottom:0;
        }

        .fourPict4 {
            right: 0;
            bottom:0;
        }

    </style>
</head>

<body>
    <div>
        <img class="img" src="https://dummyimage.com/100x100/00f/fff&text=1" alt="">
        <img class="img" src="https://dummyimage.com/100x100/0f0/fff&text=2" alt="">
        <img class="img" src="https://dummyimage.com/100x100/f00/fff&text=3" alt="">
        <img class="img" src="https://dummyimage.com/100x100/000/fff&text=4" alt="">
    </div>
    <script>
        const img = document.getElementsByClassName("img");
        const imgLen = img.length;

        switch (imgLen) {
            case 1:
                img[0].classList.add("onePict");
                break;
            case 2:
                img[0].classList.add("twoPict1");
                img[1].classList.add("twoPict2");
                break;
            case 3:
                img[1].classList.add("threePict2");
                img[2].classList.add("threePict3");
                break;
            case 4:
                img[1].classList.add("fourPict2");
                img[2].classList.add("fourPict3");
                img[3].classList.add("fourPict4");
                break;
        }

    </script>
</body>

</html>

投稿2021/08/12 06:59

Jon_do

総合スコア1373