【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;
}