Using repeat in grid-template-areas instead of having to repeat grid cell names

Question

When using grid-template-areas in CSS grid, I wanted to have a header spanning the full width. Yes I can define the template-grid-columns with repeat( 12, 1fr) but what I was looking for is a way to use it instead of having to write the name of the column 12 times. See below.

grid-template-areas: 
            "article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero"
            "header header header header header header header header header header header header"
            "main main main main main main main main main aside aside aside"
            "footer footer footer footer footer footer footer footer footer footer footer footer";

The first row that has 'article-hero written twelve times, is there a way to use repeat so that I can do repeat(12,article-hero) instead of writing it out 12 times?

You can do it using grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 1fr); — ElusiveCoder, Mar 18 '19 at 06:00
Hey. Thanks for the response. I need it to have the repeat also hold the name of the cell. Eg. I want to know if there is a short hand to repeat adding article-hero to all 12 cells so that I can then say #article-hero { grid-area: article-hero; } — Murray Chapman, Mar 18 '19 at 07:21
yes, You can do it using this, grid-template-areas: "article-hero"; grid-template-columns: repeat(12, 1fr); — ElusiveCoder, Mar 18 '19 at 07:23

score 4 · Answer 1 · edited Mar 14 '20 at 17:10

When you are using grid-template-areas you have to take the trouble to write the grid areas out - you don't have repeat here (Its actually very similar to ASCII art).

.wrapper {
  display: grid;
  grid-template-areas: "article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero"
      "header header header header header header header header header header header header" 
      "main main main main main main main main main aside aside aside"
      "footer footer footer footer footer footer footer footer footer footer footer footer";
  height: 100vh;
}

.wrapper>* {
  border: 1px solid cadetblue;
}

article {
  grid-area: article-hero;
}

header {
  grid-area: header;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}

aside {
  grid-area: aside;
}

<div class="wrapper">
  <article>hero</article>
  <header>header</header>
  <main>main</main>
  <aside>aside</aside>
  <footer>footer</footer>
</div>

A few things to note when using grid-template-areas:

They should be rectangular - see an example here.
The number of columns must be equal in each string of your grid-template-areas property - else they would be invalid - see an example here.

Position Items Using Grid Lines

You can switch to line-based-placements here with a 12-column grid (using grid-template-columns: repeat(12, 1fr)) and using grid-column property - see demo below:

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  height: 100vh;
}
.wrapper>* {
  border: 1px solid cadetblue;
  grid-column: span 12;
}
.wrapper main {
  grid-column: span 9;
}
.wrapper aside {
  grid-column: span 3;
}

<div class="wrapper">
  <article>hero</article>
  <header>header</header>
  <main>main</main>
  <aside>aside</aside>
  <footer>footer</footer>
</div>

Using repeat in grid-template-areas instead of having to repeat grid cell names

1 Answers1