【display:grid;】レスポンシブに表示する
スマホでは1カラム。画面サイズが大きくなるにつれカラムが増えていく、レスポンシブなグリッドを作っていく
HTML
<div class="gallery">
<ul class="grid-inner">
<li class="card">
<figure class="card__img-wrap"><img src="image/img05.jpeg" alt="" class="card__img card__img_square"></figure>
<div class="card__main">
<a href="#" class="label__link"><span>Instagram</span></a>
<p class="card__title">テキストが入ります〇テキストが入ります〇</p>
<a href="#" class="label__link label__link_border label__link_bottom-right"><span>ai・1h</span></a>
</div>
</li>
...
</ul>
</div>
SCSS
.grid-inner{
width: 100%;
max-width: 1340px;
margin-inline: auto;
padding: 0 20px;
display: grid;
grid-template-columns: repeat(auto-fit , minmax(300px, 1fr));
place-content: center;
gap: 40px 20px;
}
.card{
display: block;
border-bottom: 1px solid $light-grey;
padding-bottom: 24px;
}
.card__img_square{
aspect-ratio: 1;
width: 100%;
object-fit: cover;
}
.card__main{
padding: 16px;
position: relative;
}
.label__link{
color: $grey;
font-size: 12px;
margin-bottom: 8px;
&_border{
@extend .label__link;
border: 1px solid $grey;
border-radius: 3px;
padding: 0 .5rem;
line-height: 1.5;
}
&_bottom-right{
@extend .label__link;
display: inline-block;
position: absolute;
right: 20px;
}
}
.card__title{
font-size: $fs-text;
margin-bottom: 3rem;
}
備忘録
要素を中央に配置(他動詞)
display:grid;
place-content: center;
画面サイズに合わせてオブジェクトが大きくなりつつ、minサイズがもう一つ入りそうになったらカラム追加(他動詞)
grid-template-columns: repeat(auto-fit , minmax(300px, 1fr));
画像を1:1にして縦長、横長どちらでも対応できるように表示する
.card__img_square{
aspect-ratio: 1;
width: 100%;
object-fit: cover;
}
この記事が気に入ったらサポートをしてみませんか?