CSS Grid Layout: The Repeat Notation

Repeat() is a notation that you can use with the grid-template-columns and grid-template-rows properties to make your rules more concise and easier to understand when creating a large amount of columns or rows.

For example, let’s say we have this deffinition for a grid container:

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

We can use the repeat() notation like this instead to simplify:

.container {
  display: grid;
  grid-gap: 10px 15px;

  grid-template-columns: repeat(3, 1fr 2fr);
  grid-template-rows: repeat(2, 100px auto 20%);
}

The first value passed to repeat() is the number of repetitions and the second value is the grid tracks to repeat.

↓ Here's a great React course we recommend. Plus, this affiliate banner helps support the site πŸ™

Repeat() with named lines

You can also use repeat with named lines:

.container {
  display: grid;
  grid-auto-flow: column dense;

  grid-template-columns: repeat(4, [col] 1fr);
  grid-template-rows: repeat(5, [row] 150px);
}

Which is equivalent to the following long-form definition:

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

Named grid lines at the end of repeat notations end up sharing the same line as the next starting name line. For examples, with this:

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

We get this equivalent long-form definition:

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

See Also

  Tweet It

πŸ•΅ Search Results

πŸ”Ž Searching...

Sponsored by #native_company# β€” Learn More
#native_title# #native_desc#
#native_cta#