title: css: displaying items in two columns depending on the num of items
body: <p>I'm trying to figure out how to style the following - I have a list that is dynamic, so sometimes it will display 3 items and other times 4 items (max number). What I want to achieve is to have the list being displayed as one column when it renders 3 items or less. When it has 4 items, it will render in 2 columns (2 items in each row). How can I tweak my css to achieve that?</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>.list {
    display: grid;
    gap: var(--spacing-2);
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 26px);
    margin-bottom: var(--spacing-4);
    width: 100%;
  }
  
  @media (min-width: 768px) {
    .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="list"&gt;
    &lt;div&gt;1 lorem&lt;/div&gt;
    &lt;div&gt;2 lorem&lt;/div&gt;
    &lt;div&gt;3 lorem&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;hr /&gt;
  &lt;hr /&gt;
  
  &lt;div class="list"&gt;
    &lt;div&gt;1 lorem&lt;/div&gt;
    &lt;div&gt;2 lorem&lt;/div&gt;
    &lt;div&gt;3 lorem&lt;/div&gt;
    &lt;div&gt;4 lorem&lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>