Table of products with CSS [duplicate] - html

Question

This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 3 years ago.
I am trying to make products catalog with React and CSS. Everything seems to be okay except last row of products.
The last row has only 1 element and since the flex-grow: 1 is set, it takes up all the available width.
Is it possible to set the same width for all elements in the row?
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>

Answer 1

You can always set the initial width to a percentage:
.products__product {
...
flex: 0 0 20%
...
}
The above says, do not shrink nor grow the items, but set it to 20% of the width of the container. So even if you have a single element in the container, it will only occupy 20%. You can adjust based on the number of elements you have. Unfortunately, you can't use fractional notation.

Answer 2

You could just set the width of the products__product class if you want to keep them uniform.
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
.products__product {
width: 30%; // 3 per row
margin: 1.5em 0.75em 0 0.75em;
min-height: 250px;
}
}

Answer 3

How about this?
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
.products__product {
flex: 0 0 20%;
min-width: 20%;
margin: 1.5em 0.75em 0 0.75em;
min-height: 250px;
background: red;
}
<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>