Creating a repeating CSS Grid layout

Question

I've read through many other similar questions, and tried to do it myself for a few days, but I am stuck in creating a repeating CSS grid layout.

Right now I have succeeded in creating the layout as it should be, but it only works for up to 6 items. If any more are added they overlap with the current items as they are stuck in the same grid space. I would need the grid to be infinitely applicable for all the items that would follow underneath it. I have already tried working with :nth-child, both when defining grid-template-areas in the grid container, as well as using grid-area on the individual items (as can be seen commented out below).

.grid-container {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas:
  "BigLeft BigLeft BigLeft SmallRight1 SmallRight1"
  "BigLeft BigLeft BigLeft SmallRight2 SmallRight2"
  "SmallLeft1 SmallLeft1 BigRight BigRight BigRight"
  "SmallLeft2 SmallLeft2 BigRight BigRight BigRight";
}

.item {
  background: #222;
}

.grid-container > .item:nth-child(6n+1) {
  /* grid-area: 1 / 1 / 3 / 4; */
  grid-area: BigLeft;
  min-height: 60vh;
}

.grid-container > .item:nth-child(6n+2) {
  /* grid-area: 1 / 4 / 2 / 6; */
  grid-area: SmallRight1;
  min-height: 300px;
}

.grid-container > .item:nth-child(6n+3) {
  /* grid-area: 2 / 4 / 3 / 6; */
  grid-area: SmallRight2;
  min-height: 300px;
}

.grid-container > .item:nth-child(6n+4) {
  /* grid-area: 3 / 1 / 4 / 3; */
  grid-area: SmallLeft1;
  min-height: 300px;
}

.grid-container > .item:nth-child(6n+5) {
  /* grid-area: 4 / 1 / 5 / 3; */
  grid-area: SmallLeft2;
  min-height: 300px;
}

.grid-container > .item:nth-child(6n+6) {
  /* grid-area: 3 / 3 / 5 / 6; */
  grid-area: BigRight;
  min-height: 60vh;
}

<div class="grid-container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

How can I repeat the (now 6-item) grid layout underneath the current grid, and allow this to work for as many items that may follow?

Temani Afif · Accepted Answer · 2022-02-01 20:42:52Z

6

Don't define explicit area, only define the sizes and let the browser do the job for you

.grid-container {
  display: grid;
  grid-gap: 15px;
  grid-auto-flow:dense;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 150px; /* height of one row */
}

.item {
  background: #222;
}

.grid-container > .item:nth-child(6n+1),
.grid-container > .item:nth-child(6n+6){
  grid-area: span 2/span 3; /* take 2 rows and 3 columns */
}

.grid-container > .item:nth-child(6n+2),
.grid-container > .item:nth-child(6n+3),
.grid-container > .item:nth-child(6n+4){
  grid-column: span 2; /* take 2 columns */
}

.grid-container > .item:nth-child(6n+5){
  grid-column: 1/span 2; /* take 2 columns and start at column 1*/
}

<div class="grid-container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

answered Feb 1, 2022 at 20:42

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andy Brown Over a year ago

Why doesn't this amazing technique figure prominently in online grid CSS tutorials? Bye bye table tags!

Temani Afif Over a year ago

@AndyBrown I have one: css-tricks.com/…

Collectives™ on Stack Overflow

Creating a repeating CSS Grid layout

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related