タイル型にレイアウトする方法

今回はタイル型にする､レイアウトです｡完成系はこちらです｡

HTML

<div class="grid-box">
<figure class="item1"><img src="images/cloud.JPG"></figure>
<figure class="item2"><img src="images/sakura.JPG"></figure>
<figure class="item3"><img src="images/tou.JPG"></figure>
<figure class="item4"><img src="images/compo.JPG"></figure>
<figure class="item5"><img src="images/bike.JPG"></figure>
</div>

figureに､いちいち､クラス名をつけます｡かなり､めんどくさいですね｡クラス名のかぶりは厳禁です｡分かりやすい名前にしましょう｡

CSS

.grid-box{
display: grid;
gap: 20px;
grid-template-columns: repeat(3,1fr);
grid-template-areas:
"gridA gridB gridC"
"gridA gridD gridE"
;

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

.item1{
grid-area: gridA;
}

.item2{
grid-area: gridB;
}

.item3{
grid-area: gridC;
}

.item4{
grid-area: gridD;
}

.item5{
grid-area: gridE;
}

いちいちクラス名をつけたものに､grid-areaを書きます｡名前のかぶりがないように｡かなり､めんどくさいですね｡

grid-template-areas:で並びを表示させます｡手書きでいいので､図に書いて､その通りに､grid-areaを書きます｡

上の例で行くと､上は､gridA gridB gridC､下は､gridA gridD gridE｡

gridAが､縦に伸びているのです｡

あとは､gapで間隔を空け､imgのwidthとheightを100%にします｡画像が伸びるので､object-fit: cover;を書きます｡これで完成です｡

問題点

あらかじめ画像が決まっているならいいですが､あとから追加する場合､かなりめんどくさいですね｡また､クラス名を付けて､そして､置き方を考えないといけない｡

それが難点かなと思います｡

でも､わりと個性的な見せ方になるので､覚えていいかも｡

僕は積極的に使ってマスターしたい｡まだ､理解していない場面もあるので｡

もっと､簡単な方法があればいいのですが･･･････｡

ただ､解説できるほどのスキルを持ったので､これでいいかな｡今後､デモサイトでも使っていきたいと思っています｡

ちなみに､デモサイトをがあるので､気になる方はチェックして下さい｡メインビジュアルをタイル型にしています｡

• 浪人のサムライ
  1カラムサイト

さいごに

かなり詳しくなりました｡HTMLとCSSとの付き合いはかなり長いです｡まだまだ､知らないことばかり｡今後も覚えたい｡

僕が困ったことは､誰かも困っているはず｡解説できそうなら書いてみたいと思います｡