Creating a repeating CSS Grid layout-CodePudding

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 >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></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?

CodePudding user response：

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 >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>