CSSグリッドレイアウト:繰り返し表記
提供:Dev Guides
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]; }