【CSS】GridとFlexでの様々なレイアウトまとめ

2024年4月4日2024年4月27日

URLをコピーしました！

目次（クリックでジャンプ）

【CSS】GridとFlexでの様々なレイアウトまとめ

HTML構造

<div class="grid">
   <div class="grid__item">グリッドアイテム</div>
   <div class="grid__item">グリッドアイテム</div>
   <div class="grid__item">グリッドアイテム</div>
   <div class="grid__item">グリッドアイテム</div>
</div>

固定グリッドレイアウト【PC】2列、【SP】1列

.grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;
}
@media (max-width: 576px) {
   .grid {
       grid-template-columns: 1fr;
       gap: 1.5rem;
    }
}

可変型レイアウト【PC】3～4列、【タブレット】3～2列、【スマホ】1列

下記コードはSCSSで記述しています。CSSでコードを使いたい方は、手動またはツール等でCSSに変換して使ってください。
・オンラインSCSS→CSSコンバーター
・SCSSをCSSにリアルタイムで変えるツール

.grid {
   display: flex;
   justify-content: center;
   gap: 2rem;
   flex-wrap: wrap;
   &__item {
      width: 100%;
      max-width: 300px;//列数を変える場合はここのサイズを変える
   }
}