title: CSS3 grid layouts: New row after specific element - possible?
body: <p>I've got a list of items, sorted by date. </p>
  
  <p>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. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid"&gt;
    &lt;div class="item green"&gt;&lt;/div&gt;
    &lt;div class="item green"&gt;&lt;/div&gt;
    &lt;div class="item green"&gt;&lt;/div&gt;
    &lt;div class="item green"&gt;&lt;/div&gt;
    &lt;div class="item green"&gt;&lt;/div&gt;
    &lt;div class="item brown"&gt;&lt;/div&gt;
    &lt;div class="item brown"&gt;&lt;/div&gt;
    &lt;div class="item brown"&gt;&lt;/div&gt;
    &lt;div class="item brown"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>
  
  <p>I could of course split the array containing all items at a certain point and organize the output into two separate grids, like so:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid"&gt;
    &lt;div class="item green"&gt;&lt;/div&gt;
    &lt;div class="item green"&gt;&lt;/div&gt;
    &lt;div class="item green"&gt;&lt;/div&gt;
    &lt;div class="item green"&gt;&lt;/div&gt;
    &lt;div class="item green"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="grid"&gt;
    &lt;div class="item brown"&gt;&lt;/div&gt;
    &lt;div class="item brown"&gt;&lt;/div&gt;
    &lt;div class="item brown"&gt;&lt;/div&gt;
    &lt;div class="item brown"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Probably that's the easiest option. Looks like what I want to achieve &amp; isn't too difficult to do. But anyway, I'm curious: Is there a more elegant approach to this? I was thinking something like:</p>
  
  <pre><code>.item.green + .item.brown:before { 
  /* force new row */
  }
  </code></pre>