くまだどうも、くまだです。
display:grid;を使って、画像をさまざまな大きさでパネルみたいな配置にします。
Gridで画像を異なる大きさでパネル配置
コードは以下になります。
<div class="gridBox">
<div class="gridBox__img item1">
<div class="commonImg">
<img src="images/dummy.png" alt="">
</div>
</div>
<div class="gridBox__img item2">
<div class="commonImg">
<img src="images/dummy2.jpg" alt="">
</div>
</div>
<div class="gridBox__img item3">
<div class="commonImg">
<img src="images//dummy3.jpg" alt="">
</div>
</div>
<div class="gridBox__img item4">
<div class="commonImg">
<img src="images/sample.png" alt="">
</div>
</div>
<div class="gridBox__img item5">
<div class="commonImg">
<img src="images/sample2.png" alt="">
</div>
</div>
</div>
.gridBox {
display: -ms-grid;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 235px 200px 235px;
grid-template-areas:
"item1 item1 item1 item1 item1"
"item2 item2 item2 item3 item3"
"item4 item4 item5 item5 item5";
/* 余白調整用 */
margin-top: 40px;
max-width: 50%;
margin-right: auto;
margin-left: auto;
}
.gridBox img {
height: 100%;
object-fit: cover;
}
.gridBox .commonImg {
height: 100%;
}
.item1 {
grid-area: item1;
}
.item2 {
grid-area: item2;
}
.item3 {
grid-area: item3;
}
.item4 {
grid-area: item4;
}
.item5 {
grid-area: item5;
}
それぞれの画像には、grid-areaプロパティでエリア名を指定してあげます。
.item1 {
grid-area: item1;
}
.item2 {
grid-area: item2;
}
.item3 {
grid-area: item3;
}
.item4 {
grid-area: item4;
}
.item5 {
grid-area: item5;
}下記の部分で、グリッドの列を5列に均等配置（列幅も同じになる）
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;下記部分で、グリッドの行高さを指定。1行目が235px、2行目が200px、3行目が235px
grid-template-rows: 235px 200px 235px;下記部分で、グリッドのアイテムをそれぞれ配置。3×5のグリッド配置になります。
grid-template-areas:
"item1 item1 item1 item1 item1"
"item2 item2 item2 item3 item3"
"item4 item4 item5 item5 item5";図にするとこんなイメージ。
flexboxだとなかなかできない配置だと思います。こういうパネルっぽい配置だったらgridプロパティがおすすめ。
お知らせ一覧のカード系の配置でもgrid使えますが、こういう配置もできるのは面白い。
ここまで読んでくださりありがとうございました。