title: How to align row entries when they do not take full columns to act like `justify-content: space-between`?
body: <p>I am looking to build an auto layouting grid, where I can just put stuff in and not worry about exact placement.</p>
  <p>As I am testing out the setup with CSS Grid, I found out that if I lay out items in expected order then they the fill out the whole grid nicely.</p>
  <p>But, if I switch them around, the contents get aligned to the left at all times, but I am looking to space them out pushing stuff to edges, just like <code>justify-content: space-between</code> does for <a href="/questions/tagged/flexbox" class="post-tag" title="show questions tagged &#39;flexbox&#39;" rel="tag">flexbox</a>. I want the result to respect the columns, though.</p>
  <p>I played around with <code>justify-content: space-between</code> as I saw that Grid spec also takes that into account, but it messes up item column span and doesn't actually do what I want.</p>
  <p>Is this even possible? Preferably without JS.</p>
  <p>Here's a layout where I want for the pink and blue items to be aligned to the end of the 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>* {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    padding: 0;
  }
  
  #dashboard {
    min-height: 70vh;
    
    background-color: lightgray;
    
    border-radius: 1vh;
    
    padding: 3vh;
    
    display: grid;
    grid-template-columns: repeat(12, auto);
    gap: 3vh;
  }
  
  #table {
    height: 20vh;
    
    background-color: green;
    border-radius: 1vh;
    
    grid-column: auto / span 12;
  }
  
  #graph {
    height: 20vh;
    
    background-color: yellow;
    border-radius: 1vh;
    
    grid-column: auto / span 12;
  }
  
  #stat-x, #stat-y, #stat-z {
    height: 20vh;
    
    background-color: red;
    border-radius: 1vh;
    
    grid-column: auto / span 4;
  }
  
  #stat-y {
    background-color: green;
  }
  
  #stat-z {
    background-color: blue;
  }
  
  #small-table, #filter {
    height: 20vh;
    
    background-color: pink;
    border-radius: 1vh;
    
    grid-column: auto / span 6;
  }
  
  #filter {
    background-color: magenta;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="dashboard"&gt;
    &lt;div id="table"&gt;&lt;/div&gt;
    &lt;div id="graph"&gt;&lt;/div&gt;
    &lt;div id="stat-x"&gt;&lt;/div&gt;
    &lt;div id="small-table"&gt;&lt;/div&gt;
    &lt;div id="stat-y"&gt;&lt;/div&gt;
    &lt;div id="stat-z"&gt;&lt;/div&gt;
    &lt;div id="filter"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>