CSS how to only show 1 row and hide the others? - css

Question

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:
.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;
}
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?

Answer 1

You can use CSS max-height and #media queries to achieve this effect:
Give the .stocks-container a max-height which corresponds with the height of a single grid row and declare overflow: hidden
This ensures that there will now only ever be a single row visible (ie. no vertical wrapping of rows).
Now add a short series of break-point media queries to reset grid-template-columns as percentages of the viewport width.
This enables those grid boxes which are still visible to fill the entire horizontal width reserved for the .stocks-container.
Working Example:
.stocks-container {
display: grid;
grid-template-columns: repeat(5, calc(20% - 6px));
grid-template-rows: 92px;
grid-column-gap: 6px;
grid-row-gap: 6px;
max-height: 92px;
font-size: 11px;
overflow: hidden;
}
.stocks-container div {
height: 80px;
text-align: center;
border: 1px solid rgb(127, 127, 127);
}
#media only screen and (max-width: 900px) {
.stocks-container {
grid-template-columns: repeat(4, calc(25% - 6px));
}
}
#media only screen and (max-width: 750px) {
.stocks-container {
grid-template-columns: repeat(3, calc(33.33% - 6px));
}
}
#media only screen and (max-width: 600px) {
.stocks-container {
grid-template-columns: repeat(3, calc(50% - 6px));
}
}
<div class="stocks-container">
<div>
<h2>Company 1</h2>
<p>Company Stock</p>
</div>
<div>
<h2>Company 2</h2>
<p>Company Stock</p>
</div>
<div>
<h2>Company 3</h2>
<p>Company Stock</p>
</div>
<div>
<h2>Company 4</h2>
<p>Company Stock</p>
</div>
<div>
<h2>Company 5</h2>
<p>Company Stock</p>
</div>
</div>