Zenn
👻

【CSS】grid-area でギャラリーを作る

2024/03/11に公開
CSS
#
grid
tech

grid-area でギャラリーを作る

CSSでギャラリーを作成する場合、フレックスボックスで簡単に作成できますが、

グリッドを使用することで、少し複雑なギャラリーを簡単に作成できます。

例えば、以下のようなギャラリーです。

grid-difficult.png

このギャラリーでは、grid-template-areas プロパティを用いています。

grid-template-areas プロパティ

grid-template-areas プロパティは、グリッドトラックごとに名前を付与することができます。

.gallery {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    grid-template-rows: 30% 30%;
    
    grid-template-areas:
        "A B C"
        "D E F";
    
    gap: 10px;
}

上記のように”A B C” は1行を表しており、半角スペースで列を表しています。

このコードだと、以下のイメージになります。

grid-template-areas.png

配置にはgrid-area プロパティを要素に設定するだけです。

.gallery .photoA {
    grid-area: A;  // エリア名を指定
}

grid-area.png

一般的なギャラリー

まずは、一般的なギャラリーを作成してみます。

HTML

<div class="gallery">
    <figure class="photoA"><img src="images/test1.jpg" alt="photoA"></figure>
    <figure class="photoB"><img src="images/test2.jpg" alt="photoB"></figure>
    <figure class="photoC"><img src="images/test3.jpg" alt="photoC"></figure>
    <figure class="photoD"><img src="images/test4.jpg" alt="photoD"></figure>
    <figure class="photoE"><img src="images/test5.jpg" alt="photoE"></figure>
    <figure class="photoF"><img src="images/test6.jpg" alt="photoF"></figure>
</div>

CSS

.gallery {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    grid-template-rows: 30% 30%;
    grid-template-areas:
        "A B C"
        "D E F";
    gap: 10px;
}

.gallery .photoA {
    grid-area: A;
}

.gallery .photoB {
    grid-area: B;
}

.gallery .photoC {
    grid-area: C;
}

.gallery .photoD {
    grid-area: D;
}

.gallery .photoE {
    grid-area: E;
}

.gallery .photoF {
    grid-area: F;
}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

結果

grid-area-common.png

大きさが違うギャラリー

グリッドエリアの指定を変えることで、画像ごとの大きさを変更したギャラリーの作成も可能です。

HTML

<div class="gallery">
    <figure class="photoA"><img src="images/test1.jpg" alt="photoA"></figure>
    <figure class="photoC"><img src="images/test3.jpg" alt="photoC"></figure>
    <figure class="photoD"><img src="images/test4.jpg" alt="photoD"></figure>
    <figure class="photoE"><img src="images/test5.jpg" alt="photoE"></figure>
</div>

CSS 変更部分

.gallery {
    ...
    grid-template-areas:
        "A A C"
        "D E E";
    ...
}
...

結果

grid-2-1-1-2.png

少し複雑なギャラリー

グリッドトラックを増やすことで、細かな配置が可能です。

この方法で、Unsplash や Pinterest のようなギャラリーも作成できます。

HTML

<div class="gallery">
    <figure class="photoA"><img src="images/test1.jpg" alt="photoA"></figure>
    <figure class="photoB"><img src="images/test2.jpg" alt="photoB"></figure>
    <figure class="photoC"><img src="images/test3.jpg" alt="photoC"></figure>
    <figure class="photoD"><img src="images/test4.jpg" alt="photoD"></figure>
    <figure class="photoE"><img src="images/test5.jpg" alt="photoE"></figure>
    <figure class="photoF"><img src="images/test6.jpg" alt="photoF"></figure>
    <!-- 追加 -->
    <figure class="photoG"><img src="images/test7.jpg" alt="photoG"></figure>
    <figure class="photoH"><img src="images/test8.jpg" alt="photoH"></figure>
</div>

CSS

.gallery {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    /* --- 変更 --- */
    grid-template-rows: 20% 20% 20% 20% 20%; 
    grid-template-areas:
        "A B C"
        "A B F"
        "A E F"
        "D E H"
        "D G H";
    /* ------------ */
    gap: 10px;
}

.gallery .photoA {
    grid-area: A;
}

.gallery .photoB {
    grid-area: B;
}

.gallery .photoC {
    grid-area: C;
}

.gallery .photoD {
    grid-area: D;
}

.gallery .photoE {
    grid-area: E;
}

.gallery .photoF {
    grid-area: F;
}

.gallery .photoG {
    grid-area: G;
}

.gallery .photoH {
    grid-area: H;
}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

結果

grid-difficult.png

さらにグリッドトラックを増やせば、より細かな配置が可能になります。

Discussion