Table of products with CSS

Question

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&amp;#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>

Can you replicate your code, include the html code output? – little_coder Nov 14 '19 at 00:42 — little_coder, Nov 14 '19 at 00:42
My code is in react.js. Added it to the post. – Gvidas Pranauskas Nov 14 '19 at 00:43 — Gvidas Pranauskas, Nov 14 '19 at 00:43
Added it to the post. – Gvidas Pranauskas Nov 14 '19 at 00:52 — Gvidas Pranauskas, Nov 14 '19 at 00:52
is it 5 columns in a row? – little_coder Nov 14 '19 at 01:15 — little_coder, Nov 14 '19 at 01:15

score 0 · Answer 1 · answered Nov 14 '19 at 00:59

0

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.

answered Nov 14 '19 at 00:59

Frank Fajardo

7,034
1
29
47

But it doesn't take all the available space. Maybe there is a way to add something like a placeholder? – Gvidas Pranauskas Nov 14 '19 at 01:04
Or you could stick with your original, and simply add invisible elements (ie, `visibility: hidden`) which still take up space but are not visible. – Frank Fajardo Nov 14 '19 at 01:06

score 0 · Answer 2 · answered Nov 14 '19 at 01:08

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;
  }
}

score 0 · Answer 3 · answered Nov 14 '19 at 01:14

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&amp;#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>

Table of products with CSS

3 Answers3