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

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>

Answer 3

The approach that I came up with is definitely the longest one, but if for what ever reason you need to have a modular design I think this way would save you time in the end. Added grid-areas and added individual class for all your tiles.
.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>