How to alternate grid pattern for unknown number of items - css

Question

I want to create a repeating grid. Three items per row.
First row: item one spans 2 cols and 2 rows. Followed by item two and item three spanning 1 col and 1 row.
Second row would be inverse: item one and item two span 1 col and 1 row. item 3 spans 2 cols and 2 rows.
See image below for what I'm trying to do. I wanting this for an infinite amount of rows and items.
.container {
width: 100%;
margin: 0 auto;
max-width: 80%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
h2 {
font-size: 16px;
font-family: sans-serif;
font-weight: normal;
}
.item {
background: pink;
}
.item:nth-child(3n+1) {
grid-column: auto /span 2;
grid-row: auto /span 2;
}
.item:nth-child(3n+2),
.item:nth-child(3n+3) {
/* grid-area: 1 / 3 / 2 / 4; */
border: 1px solid red;
grid-column: auto /span 1;
grid-row: auto /span 1;
}
.container.two .item:nth-child(3n+1) {
border: 5px solid yellow;
grid-area: 1 / 1 / 2 / 2;
}
.container.two .item:nth-child(3n+2) {
border: 5px solid orange;
grid-area: 2 / 1 / 3 / 2;
}
.container.two .item:nth-child(3n+3) {
border: 5px solid red;
grid-area: 1 / 2 / 3 / 4;
}
img {
max-width: 100%;
}
<h2>
I have this using "grid-column" and "grid-row"...
</h2>
<div class="container">
<div class="item">
First
</div>
<div class="item">
Second
</div>
<div class="item">
Third
</div>
</div>
<hr />
<h2>
I want to alternate that, but I only understand how to with "grid-area"...
</h2>
<div class="container two">
<div class="item">
First
</div>
<div class="item">
Second
</div>
<div class="item">
Third
</div>
</div>
<hr/>
<h2>
But I want to have an unlimited amount of items alternate those patterns...
</h2>
<div class="container">
<div class="item">
First
</div>
<div class="item">
Second
</div>
<div class="item">
Third
</div>
<div class="item">
First
</div>
<div class="item">
Second
</div>
<div class="item">
Third
</div>
<div class="item">
First
</div>
<div class="item">
Second
</div>
<div class="item">
Third
</div>
<div class="item">
First
</div>
<div class="item">
Second
</div>
<div class="item">
Third
</div>
<div class="item">
First
</div>
<div class="item">
Second
</div>
<div class="item">
Third
</div>
</div>

Answer 1

You can do it like below:
.container {
display:grid;
grid-template-columns:repeat(3,1fr); /* 3 columns */
grid-auto-flow:dense; /* make sur to fill all the area */
grid-auto-rows:50px; /* height of one row */
grid-gap:5px;
}
.container * {
background:red;
}
/* the pattern repeat each 6 elements */
.container :nth-child(6n + 1),
.container :nth-child(6n + 6){
grid-area:span 2/span 2; /* 1 and 6 take 2 rows and 2 columns */
}
.container :nth-child(6n + 5){
grid-column:1; /* 5 at first column */
}
<div class="container">
<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>
<div></div>
<div></div>
</div>