title: I am using flexbox to create my layout, however, I can't properly position the elements on my last row. Can I recreate the same layout with grid?
body: <p>I have a flex container with a width that is not fixed and a bunch of children inside of it with fixed width. I've set <code>flex-wrap</code> to <code>wrap</code> and <code>justify-content</code> to <code>space-evenly</code>. This works fine and dandy for most parts, however, the position of the elements on the last row are not where I want them to be</p>
  
  <p>I understand that the element on the last row are where they are because of justify-content: space-evenly. I am wondering if it is possible to space the content evenly when the row is full whilst keeping the children on the last line to the left side of the div. It should look something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/KntAp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KntAp.png" alt="enter image description here"></a></p>
  
  <p>Sadly, I read that targeting elements on the last row is not actually possible with flexbox right now and that I should look into other alternatives. This is why I am wondering if its possible to recreate the same layout with grid whilst fixing the last row issues I'm having</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>    .cards-list {
          padding-top: 20px;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-evenly;
      }
      .card {
          width: 120px;
          height: 180px;
          background-color: red;
          margin-bottom: 10px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='cards-list'&gt;
     &lt;div class='card'&gt;&lt;/div&gt;
     &lt;div class='card'&gt;&lt;/div&gt;
     &lt;div class='card'&gt;&lt;/div&gt;
     &lt;div class='card'&gt;&lt;/div&gt;
     &lt;div class='card'&gt;&lt;/div&gt;
     &lt;div class='card'&gt;&lt;/div&gt;
     &lt;div class='card'&gt;&lt;/div&gt;
     &lt;div class='card'&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>