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

Question

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

user_8620333 · Answer

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 */
}

user_14072420 · Answer

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

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

2 Answers