grid-area issue in CSS with repeating divs-CodePudding

So we have a grid where we are following a specific deisng, this can be seen on codepen:- https://codepen.io/scottYg55/pen/jOKXoJW

So the first 6 is showing the design we want to follow, however we want this repeated so that any divs that are added follow the exact style.

This is the main CSS targeting the parent and child divs:-

<>

.services-cont {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  grid-template-columns: auto auto auto;
  grid-gap: 30px;
}

.service-sing:nth-child(1n) {
  grid-area: 1 / 1 / 2 / 2;
}

.service-sing:nth-child(2n) {
  grid-area: 1 / 2 / 3 / 3;
}

.service-sing:nth-child(3n) {
  grid-area: 1 / 3 / 2 / 4;
}

.service-sing:nth-child(4n) {
  grid-area: 2 / 1 / 4 / 2;
}

.service-sing:nth-child(5n) {
  grid-area: 3 / 2 / 4 / 3;
}

.service-sing:nth-child(6n) {
  grid-area: 2 / 3 / 4 / 4;
}

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
  <div >7</div>
  <div >8</div>
  <div >9</div>
</div>

Does anyone have any solutions?

Thanks

CodePudding user response：

There's an answer already on stackoverflow but for your specific case you posted on codepen, for element 6 to move up the fill the vacant space you also need to set grid-auto-flow to dense and tweaked your nth-child rules. See below.

.services-cont {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  width: 100%;
  grid-gap: 10px;
  grid-auto-flow: dense;
}

.services-cont > div {
  outline: 1px solid red;
}

.service-sing:nth-child(6n   1) {
  grid-row: span 1;
  grid-column: 1;
}
.service-sing:nth-child(6n   2) {
  grid-row: span 3;
  grid-column: 2;
  outline-color: green;
}
.service-sing:nth-child(6n   3) {
  grid-row: span 2;
  grid-column: 3;
  outline-color: magenta;
}
.service-sing:nth-child(6n   4) {
  grid-row: span 3;
  grid-column: 1;
  outline-color: lightgray;
}
.service-sing:nth-child(6n   5) {
  grid-row: span 1;
  grid-column: 2;
  outline-color: pink;
}
.service-sing:nth-child(6n   6) {
  grid-row: span 2;
  grid-column: 3;
  outline-color: blue;
}

<div >
    <div >1</div>
    <div >2</div>
    <div >3</div>
    <div >4</div>
    <div >5</div>
    <div >6</div>
  
    <div >7</div>
    <div >8</div>
    <div >9</div>
    <div >10</div>
    <div >11</div>
    <div >12</div>
</div>

CodePudding user response：

One solution could be to just repeat the div with "services-cont" class for every 6th child. But it's possible with just CSS. I tried to create a similar layout:

.services {
  margin: 4em 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  grid-gap: 1em;
}

.service {
  width: 100%;
  height: 50%;
  position: relative;
}

.service p {
  position: relative;
  margin: 0;
  padding: 1em;
  background-color: green;
}

.service:nth-child(2n) p {
  padding: 3em 1em;
  margin-top: -2em;
  background-color: lime;
}

.service:nth-child(2n 1) p {
  background-color: red;
}

<ul >
  <li >
    <p>Service 1</p>
  </li>
  <li >
    <p>Service 2</p>
  </li>
  <li >
    <p>Service 3</p>
  </li>
  <li >
    <p>Service 4</p>
  </li>
  <li >
    <p>Service 5</p>
  </li>
  <li >
    <p>Service 6</p>
  </li>
  <li >
    <p>Service 7</p>
  </li>
  <li >
    <p>Service 8</p>
  </li>
  <li >
    <p>Service 9</p>
  </li>
    <li >
    <p>Service 10</p>
  </li>
    <li >
    <p>Service 11</p>
  </li>
  <li >
    <p>Service 12</p>
  </li>
</ul>