Interlave two or more rows using CSS Grid

I want to create a layout like this:


test	test	test
data-0	data-1	data-2
test	test	test
data-3	data-4	data-5

But the following code produces this:


test	test	test	test	test	test
data-0	data-1	data-2	data-3	data-4	data-5

This example shows the layout for 3 columns, 2*2 rows and 6 items. In practice I want to work with 10 columns, auto*2 rows and a dynamic amount of items. As a bonus, it would be awesome, if the amount of column adjusts based on the available width. The problem seems to be that overflowing elements are just added to the first row with a given name, instead of the first non-full row with a given name.

Current implementation using react:

const items = new Array(6)
  .fill(undefined)
  .map((e, i) => ({ title: "test", data: "data-" + i }));

const root = (
  <div
    style={{
      display: "grid",
      gridTemplateColumns: "repeat(3, auto)",
      gridTemplateRows: "repeat(2, [title] auto [data] auto)",
    }}
  >
    {items.map((item, i) => (
      <React.Fragment key={i}>
        <div style={{ gridRow: "title" }}>{item.title}</div>
        <div style={{ gridRow: "data" }}>{item.data}</div>
      </React.Fragment>
    ))}
  </div>
);

ReactDOM.render(root, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Solution

You need some more css classes, you need to set positions using nth-child selector:

.container {
    display: grid;
    grid-template-columns: repeat(3, 50px);
    grid-auto-rows:  30px;
    grid-auto-flow: column dense;
}


.title:nth-child(6n+3) {
    grid-column: 2;
    background-color: lightblue;
}
.data:nth-child(6n+4) {
    grid-column: 2;
    background-color: lightblue;
}

.title:nth-child(6n+5) {
    grid-column: 3;
    background-color: lightgreen;
}
.data:nth-child(6n) {
    grid-column: 3;
    background-color: lightgreen;
}

<div class="container">
<div class="title">title1</div>
<div class="data">data1</div>
<div class="title">title2</div>
<div class="data">data2</div>
<div class="title">title3</div>
<div class="data">data3</div>
<div class="title">title4</div>
<div class="data">data4</div>
<div class="title">title5</div>
<div class="data">data5</div>
<div class="title">title6</div>
<div class="data">data6</div>
<div class="title">title7</div>
<div class="data">data7</div>
<div class="title">title8</div>
<div class="data">data8</div>
<div class="title">title9</div>
<div class="data">data9</div>
<div class="title">title10</div>
<div class="data">data10</div>
<div class="title">title</div>
<div class="data">data</div>
<div class="title">title</div>
<div class="data">data</div>
</div>