開発者ドキュメント

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];
}

関連項目

モバイルバージョンを終了