Currently, I am working on creating a product catalog using React and CSS. Everything is going smoothly except for the last row of products.
The issue with the last row is that it only contains 1 element, and due to the flex-grow: 1 setting, it ends up taking up all the available width.
I'm looking for a way to set an equal width for all elements in that row. Is there a solution for this?
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
.products__product {
flex: 1 0 20%;
margin: 1.5em 0.75em 0 0.75em;
min-height: 250px;
background:grey;
}<div class="products">
<div class="container">
<div class="products__content">
<ul>
<a class="products__product" href="/products/21/stone-in-the-night"
><li><h1>Stone in the Night</h1></li></a
><a class="products__product" href="/products/21/the-dying-of-the-spirits"
><li><h1>The Dying of the Spirits</h1></li></a
><a class="products__product" href="/products/21/the-beginnings-guardian"
><li><h1>The Beginning&#8217;s Guardian</h1></li></a
><a class="products__product" href="/products/21/death-of-light"
><li><h1>Death of Light</h1></li></a
><a class="products__product" href="/products/21/the-lost-soul"
><li><h1>The Lost Soul</h1></li></a
><a class="products__product" href="/products/21/first-husband"
><li><h1>First Husband</h1></li></a
><a class="products__product" href="/products/21/verzliaraktis"
><li><h1>Veržliaraktis</h1></li></a
><a class="products__product" href="/products/21/raktas"
><li><h1>Raktas</h1></li></a
>
</ul>
</div>
</div>
</div>