【HTML/CSS】自動でカラム落ちするGridレイアウト

2024年3月6日2024年4月12日

URLをコピーしました！

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

自動でカラム落ちするGridレイアウトのコード

auto-fill は、可能な限りグリッドアイテムを配置し、グリッドコンテナのサイズに合わせて余白を調整します。一方、 auto-fit は、グリッドアイテムのサイズを調整してコンテナにぴったり収まるようにします。

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

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
}
@media (max-width: 576px) {
    .grid {
          grid-template-columns: 1fr;
     }
}