score:2

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>


Related Query

More Query from same tag