列テンプレートの値の書き方

最も単純な書き方

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