How can I create a CSS grid with alternating single and double rows?-CodePudding

I have a list with an unlimited number of items. I need to make a grid like this:

I tried to do it, but it doesn't work and I get a different result:

.list {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  
}

.item {
  min-height: 100px;
  background-color: #0299b2;
}

.item:nth-child(3n   1) {
  min-height: 220px;
  grid-row-end: span 2;
  background-color: #20B202;
}

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

CodePudding user response：

Your pattern repeat each 6 elements so do it like below.

I also have a detailed article about such technique and more CSS tricks if you want to dig deeper: https://css-tricks.com/exploring-css-grids-implicit-grid-and-auto-placement-powers

.list {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense; /* don't forget this to fill all the cells */
}

.item {
  min-height: 100px;
  background:red;
  color:#fff;
  font-size: 30px;
}

.item:nth-child(6n   1),
.item:nth-child(6n   6){
  grid-row: span 2; /* 2 rows for 1st and 6th item */
  background: blue;
}
.item:nth-child(6n   5) {
  grid-column: 1; /* first column for 5 */
}

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

CodePudding user response：

You need to add a 2nd nth-child rule:

.list {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.item {
  min-height: 100px;
  background: blue;
}

.item:nth-child(6n   1),
.item:nth-child(6n   5) {
  min-height: 220px;
  grid-row-end: span 2;
  background: green;
}

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