CSS3 grid layouts: New row after specific element - possible?

Question

I've got a list of items, sorted by date.

Some of the items are in the future (green items), thus more interesting, some are in the past (brown items). I want the second group of items to start in a new row.

.grid{
  width: 120px;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 10px;
}
.item{
  border:1px solid black;
  height:50px;
  width:50px;
}
.green{
  background:green;
}
.brown{
  background:brown;
}

<div class="grid">
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
</div>

The number of overall items / items per category is constantly changing, the number of Items per row depends on screen size - that might eliminate some possible solutions to this.

I could of course split the array containing all items at a certain point and organize the output into two separate grids, like so:

.grid{
  width: 120px;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 10px;
  margin-bottom:10px;
}
.item{
  border:1px solid black;
  height:50px;
  width:50px;
}
.green{
  background:green;
}
.brown{
  background:brown;
}

<div class="grid">
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
</div>
<div class="grid">
  <div class="item brown"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
</div>

Probably that's the easiest option. Looks like what I want to achieve & isn't too difficult to do. But anyway, I'm curious: Is there a more elegant approach to this? I was thinking something like:

.item.green + .item.brown:before { 
/* force new row */
}

Answer 1

You could target the first .brown after .green and set grid-column-start to 1.

.grid {
  width: 120px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.item {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

.green {
  background: green;
}

.brown {
  background: brown;
}

.green + .brown {
  grid-column-start: 1;
}

<div class="grid">
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
</div>

Answer 2

Since you are using grid-template-columns, you won't be able to acheive this with before or after, you would need to set the grid-column-start to 1 with the item.green + .item.brown selection:

.grid{
  width: 120px;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 10px;
}
.item{
  border:1px solid black;
  height:50px;
  width:50px;
}
.green{
  background:green;
}
.brown{
  background:brown;
}
.item.green + .item.brown { 
    
    grid-column-start: 1;

}

<div class="grid">
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
</div>