RAM（繰り返し、自動、最小最大）

この 7 番目の例では、これまでに学習したコンセプトを組み合わせて、自動的に配置される柔軟な子を持つレスポンシブ レイアウトを作成します。非常に便利です。ここで覚えておくべき重要な用語は、repeat、auto-(fit|fill)、minmax() です。これらは RAM という頭字語です。

まとめると、次のようになります。

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

ここでも repeat() を使用していますが、今回は明示的な数値の代わりに auto-fit キーワードを使用します。これにより、これらの子要素の自動配置が有効になります。これらの子は、基本の最小値が 150px で最大値が 1fr です。つまり、小さい画面では 1fr の幅全体を占有し、幅が 150px に達すると同じ行に流れ始めます。

auto-fit を使用すると、完全に空のトラックは 0 に縮小され、塗りつぶされたトラックはスペースを占有します。ただし、これを auto-fill に変更すると、空のトラックは、塗りつぶされた場合と同じ容量のスペースを占有します。

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

HTML

<div class="parent white">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
  

CSS

        .parent {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}