列テンプレートの値の書き方
最も単純な書き方
4列、均等幅
grid-template-columns: 1fr 1fr 1fr 1fr;
One
列の幅:1fr
Two
列の幅:1fr
Three
列の幅:1fr
Four
列の幅:1fr
Five
列の幅:1fr
repeat() プロパティファンクション
4列、均等幅(上と同じ)
grid-template-columns: repeat(4, 1fr);
One
列の幅:1fr
Two
列の幅:1fr
Three
列の幅:1fr
Four
列の幅:1fr
Five
列の幅:1fr
複数の値を繰り返す
4列、奇数列が90px固定、偶数列が1frを2回繰り返す
grid-template-columns: repeat(2, 90px 1fr);
One
列の幅:90px
Two
列の幅:1fr
Three
列の幅:90px
Four
列の幅:1fr
Five
列の幅:90px
repeat()と通常の値を組み合わせる
4列、3列目まで100px固定、4列目はauto
grid-template-columns: repeat(3, 100px) auto;
One
列の幅:100px
Two
列の幅:100px
Three
列の幅:100px
Four
列の幅:1fr
Five
列の幅:100px