minmax()

グリッド内の各カラムの最小幅は300pxだ。ビューポートのサイズが変更されると、カラムの数は理想的な幅に合わせて変更される。

このグリッドはCSS Grid と minmax() を使うと、わずか 2行の CSS で作成できる。

CSS

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

auto-fit

グリッドアイテムが1行でおさまる場合でもアイテムが引き伸ばされるようにするには、auto-fit というキーワード値を使う。minmax 関数の max の値を１frなど、自動で引き伸ばされるような値にしていることが前提である。