title: CSS Grid hide elements that don't fit
body: <p>I'm trying to create a pure CSS responsive navigation. This means no media queries, no pixel values and no JS.</p>
  <p>The first challenge is to hide the navigation if there's not enough horizontal space. I was able to accomplish this, but at the expense of giving it a pixel value.</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>.wrapper {
    background: rgba(0, 255, 0, 0.1);
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min-content, 250px));
    justify-content: space-between;
    grid-template-rows: auto;
    grid-auto-rows: 0;
    /* Automatically created rows will have a height of 0. */
    overflow: hidden;
    border: 1px solid red;
  }
  
  .logo {
    background: rgba(255, 0, 0, 0.1);
  }
  
  .another-element {
    background: rgba(0, 0, 255, 0.1);
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  
  a {
    white-space: nowrap;
    background: orange;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="logo"&gt;Logo&lt;/div&gt;
    &lt;div class="another-element"&gt;
      &lt;a&gt;Link 1&lt;/a&gt;
      &lt;a&gt;Link 2&lt;/a&gt;
      &lt;a&gt;Link 3&lt;/a&gt;
      &lt;a&gt;Link 4&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I've studied the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/repeat#track-size" rel="nofollow noreferrer">repeat() function</a>. A few notes:</p>
  <ul>
  <li>Auto rows can only be created by using the <code>repeat()</code> function with <code>auto-fill</code> or <code>auto-fit</code>.</li>
  <li>Auto rows can be collapsed with <code>grid-auto-rows: 0;</code> thus hiding the elements that do not fit the first line.</li>
  <li>When using repeat() with auto-fit as the first argument, one can use minmax() as the second. The minmax() function allows us to set a minimum and maximum values for the columns, but <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/repeat#fixed-size" rel="nofollow noreferrer">it requires a pair of length/percentage and min-content, max-content or auto</a>, but does not accept min-content for both arguments: <code>minmax(min-content, min-content)</code> doesn't seem to be valid CSS.</li>
  </ul>
  <p>So everything works as expected, except the fact that the wrapping happens at a fixed 250px*2 value instead of when there's not enough space for both items. Any idea how to make the wrap only happen when there's not enough space?</p>
  <p>Here's a <a href="https://codepen.io/andrecasal/pen/NWyaqjq" rel="nofollow noreferrer">codepen</a>.</p>