CSSグリッドレイアウト:繰り返し表記
Repeat()は、grid-template-columns
およびgrid-template-rows
プロパティで使用できる表記法であり、大量の列を作成するときにルールをより簡潔で理解しやすくします。行。
たとえば、グリッドコンテナの定義が次のようになっているとします。
.container {
display: grid;
grid-gap: 10px 15px;
grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
grid-template-rows: 100px auto 20% 100px auto 20px;
}
代わりに、次のように repeat()表記を使用できます。
.container {
display: grid;
grid-gap: 10px 15px;
grid-template-columns: repeat(3, 1fr 2fr);
grid-template-rows: repeat(2, 100px auto 20%);
}
repeat()に渡される最初の値は繰り返しの数であり、2番目の値は繰り返すグリッドトラックです。
名前付き行でRepeat()
名前付き行でrepeatを使用することもできます。
.container {
display: grid;
grid-auto-flow: column dense;
grid-template-columns: repeat(4, [col] 1fr);
grid-template-rows: repeat(5, [row] 150px);
}
これは、次の長い形式の定義に相当します。
.container {
display: grid;
grid-auto-flow: column dense;
grid-template-columns:
[col] 1fr
[col] 1fr
[col] 1fr
[col] 1fr;
grid-template-rows:
[row] 150px
[row] 150px
[row] 150px
[row] 150px
[row] 150px;
}
繰り返し表記の最後にある名前付きグリッド線は、次の開始名線と同じ線を共有することになります。 たとえば、これで:
.container {
display: grid;
grid-auto-flow: column dense;
grid-template-columns: repeat(4, [col-start] 1fr [col-end]);
grid-template-rows: repeat(5, [row-start] 150px [row-end]);
}
これと同等の長い形式の定義を取得します。
.container {
display: grid;
grid-auto-flow: column dense;
grid-template-columns:
[col-start] 1fr
[col-end col-start] 1fr
[col-end col-start] 1fr
[col-end col-start] 1fr [col-end];
grid-template-rows:
[row-start] 150px
[row-end row-start] 150px
[row-end row-start] 150px
[row-end row-start] 150px
[row-end row-start] 150px [row-end];
}