CSS3 grid markup: a new line after a specific element - maybe?

Question

I have a list of items sorted by date.

Some of the objects in the future (green objects) are all the more interesting; some of them are in the past (brown objects). I want the second group of elements to start on a new line.

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

Run codeHide result

The number of common elements / elements for each category is constantly changing, the number of elements in a row depends on the screen size - this may eliminate some possible solutions for this.

I could split the array containing all the elements at a certain point and organize the output into two separate grids, for example:

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

Run codeHide result

, . , , . : ? - :

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

Answer 1

.brown .green grid-column-start 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>

Hide result

Answer 2

grid-template-columns, before after, grid-column-start 1 item.green + .item.brown:

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

Hide result

Answer 3

, , , - , , . .

.grid{
width: 120px;
display:grid;
grid-template-columns: repeat(3,1fr);
grid-template-areas: "green1 green2 green3"
                     "green4 green5 green6"
                     "green7 green8 green9"
                     "brown1 brown2 brown3"
                     "brown4 brown5 brown6";
grid-gap: 10px;
}

.item{
  border:1px solid black;
  height:50px;
  width:50px;
}
.green1 {
  background:green;
  grid-area: green1;
}
.green2 {
  background:green;
  grid-area: green2;
}
.green3 {
  background:green;
  grid-area: green3;
}
.green4 {
  background:green;
  grid-area: green4;
}
.green5 {
  background:green;
  grid-area: green5;
}
.brown1{
  grid-area: brown1;
  background:brown;
}
.brown2{
  grid-area: brown2;
  background:brown;
}
.brown3{
  grid-area: brown3;
  background:brown;
}
.brown4{
  grid-area: brown4;
  background:brown;
}

<div class="grid">
  <div class="item green1"></div>
  <div class="item green2"></div>
  <div class="item green3"></div>
  <div class="item green4"></div>
  <div class="item green5"></div>
  <div class="item brown1"></div>
  <div class="item brown2"></div>
  <div class="item brown3"></div>
  <div class="item brown4"></div>
</div>

Hide result