title: How can I center my content only when there are even items inside
body: <p>I have created this codepen.</p>
  <p><a href="https://codepen.io/Andrej888/pen/gOmpVmM" rel="nofollow noreferrer">https://codepen.io/Andrej888/pen/gOmpVmM</a></p>
  <p>So I have one row with three columns inside. But I am creating these columns dynamically. Sometimes the number of the columns could be even or odd.</p>
  <p>When they are even they look nice.</p>
  <p><a href="https://codepen.io/Andrej888/pen/oNZXKGv" rel="nofollow noreferrer">https://codepen.io/Andrej888/pen/oNZXKGv</a></p>
  <p>But when they are odd like in the first example, the third column is in the middle under the first row and it looks ugly. How can I prevent this from happening?</p>
  <p>How can I detect when there are odd numbers of columns in the rows, to make only that row to be default - flex-start instead justify content - so in my case whole row will be centered, but the
  <code>THIRD COLUMNS WILL BE UNDER THE FIRST</code>?</p>