https://qiita.com/tomo-ka/items/450b6cf6f8b9ae213feb
↑この時の実装で、不揃いの画像ギャラリーのコーディングに少し自信がついたかも、、。
他にもギャラリーを実装したときのものをまとめたいと思う。
目次
作りたいイメージ
パターン１
パターン２
HTML
<!-- パターン１ -->
<div class="gallery1">
<img src="https://picsum.photos/id/75/200/300" class="gallery1__img01"/>
<img src="https://picsum.photos/id/76/200/300" class="gallery1__img02"/>
<img src="https://picsum.photos/id/77/200/300" class="gallery1__img03"/>
<img src="https://picsum.photos/id/78/200/300" class="gallery1__img04"/>
</div>
<!-- パターン２ -->
<div class="gallery2">
<img src="https://picsum.photos/id/79/200/300" class="gallery2__img01"/>
<img src="https://picsum.photos/id/80/200/300" class="gallery2__img02"/>
<img src="https://picsum.photos/id/81/200/300" class="gallery2__img03"/>
<img src="https://picsum.photos/id/82/200/300" class="gallery2__img04"/>
</div>CSS
.gallery1,
.gallery2{
max-width: 700px;
width: 100%;
margin: auto;
margin-top: 50px;
display: grid;
grid-auto-flow: dense;
gap: 10px;
grid-template-columns: repeat(12, 1fr);
}
/* アスペクト比設定 */
img {
display: block;
aspect-ratio: 3/2;
width: 100%;
height: 100%;
object-fit: cover;
}
/* gallery1 */
.gallery1__img01 {
grid-column: 7/13;
grid-row: 1/2;
}
.gallery1__img02 {
grid-column: 1/5;
grid-row: 3/5;
}
.gallery1__img03 {
grid-column: 5/8;
grid-row: 7/8;
}
.gallery1__img04 {
grid-column: 9/12;
grid-row: 3/8;
}
/* --------------- */
/* gallery2 */
.gallery2__img01 {
grid-column: 1/6;
grid-row: 1/3;
}
.gallery2__img02 {
grid-column: 2/5;
grid-row: 3/8;
}
.gallery2__img03 {
grid-column: 6/9;
grid-row: 5/6;
}
.gallery2__img04 {
grid-column: 9/12;
grid-row: 6/8;
}
Qiitaの記事同様、grid-columnとgrid-rowで実装。
一部異なるのは、画像にnth-child（）でスタイルをあてたか、個別でクラスを付けスタイルを当てたかの違い。
コードエディタではnth-child（）での記述で問題なかったのですが、WordPressのエディタで入稿するとnth-child（2）とnth-child（4）がnth-child（1）とnth-child（3）に置き換わってしまうという現象がおきたので、個別にクラスを付与する方法にしたところうまくいきました！
次はgrid-areaを用いた実装をまとめたい。