title: CSS how to only show 1 row and hide the others?
body: <p>I have a nav at the top of my page. 
  In it I have 5 market stocks for 5 different companies. I want to display the 5 at full width but as the window gets smaller, I basically want behavior which will cut off the ones that overflow, and resize the remaining ones to fill up the nav container (so let's say at some point it would only show 3 of the stocks and hide the others). Here is the code right now:  </p>
  
  <pre><code>.stocks-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, 150px);
    grid-template-rows:1fr;
    grid-auto-rows: 0;
    overflow-y: hidden;
    justify-content: space-between;
    width: 75%;
    font-size: 11px;
    overflow-y: hidden;
  }
  </code></pre>
  
  <p>What this does currently is almost what I need. The problem is that now the stock items that overflow, and should basically create a new row, get mushed on top of the first row. Again, I don't want them to create a new row, or be scrollable. I just don't want them to be showing at all. Any ideas? </p>