👋

【CSS】gridと@containerで2列・3列の変換を行う

2024/03/20に公開

CSS

Web

tech

問題

デバイスに応じて、SNS のメニューを２列または３列で折り返したい。

このときに使われる方法として、flexのwrap を設定する方法があります。

しかし、この場合だと、考慮していなかったデバイス幅によって、４列や５列になります。

この記事では、「列の幅を２列と３列に固定にする」ことが目的です。

対処法として、grid と@container を利用してみます。

対処法

現状

sns の部分だけだと以下のようになっています。

HTML

<div class="sns">
    <ul>
        <li><a href="#"><img src="images/logo-black.png" alt="Twitter"></a></li>
        <li><a href="#"><img src="images/Facebook_Logo_Primary.png" alt="Facebook"></a></li>
        <li><a href="#"><img src="images/Instagram_Glyph_Gradient.png" alt="Instagram"></a></li>
        <li><a href="#"><img src="images/yt_icon_rgb.png" alt="YouTube"></a></li>
        <li><a href="#"><img src="images/discord-mark-blue.png" alt="Discord"></a></li>
        <li><a href="#"><img src="images/TwitchGlitchPurple.png" alt="Twitch"></a></li>
    </ul>
</div>

CSS

.sns ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    row-gap: 20px;
}

.sns img {
    width: 35px;
    height: auto;
    margin-right: 33px;
    opacity: 0.8;
}

ul にflex を設定しているだけです。

とりあえずgridにしてみる

.sns ul {
		/* 変換 */
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@containerで３列にする

.sns {
    container-type: inline-size;
    container-name: sns-grid;
}

.sns ul {
		...
}

.sns img {
    ...
}

@container sns-grid (width > 210px) {
    .sns ul {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

以上です。

問題

対処法

現状

とりあえずgridにしてみる

@containerで３列にする

Discussion