Gallery css images in list form (limit and center the images on the screen)

Question

Hello, I have a page where I want to organize the images in the form of lists I think the example will explain better, but the idea is to organize the images of 3 or 4 per line (space) and with margin on the right and on the left of 5vh! Thank you

<section class="produtos"><ul><li><img src="img/exemplo.jpg" alt="produto</li><li><img src="img/exemplo.jpg" alt="produto"></li><li><img src="img/exemplo.jpg" alt="produto"></li><li><img src="img/exemplo.jpg" alt="produto"></li><li><img src="img/exemplo.jpg" alt="produto"></li><li><img src="img/exemplo.jpg" alt="produto"></li></ul></section>

Answer 1

VH (viewport height) is used for height, so I do not recommend you use as width margin...

Anyway, I did it both ways. Using vh in the margin: https://jsfiddle.net/tkedrLe2/1/

.produtos ul li {
  width: 23.333vh;
  float: left;
  margin: 0 5vh;
}

<section class="produtos">
  <ul>
    <li>
      <img src="img/exemplo.jpg" alt="produto">
    </li>
    <li>
      <img src="img/exemplo.jpg" alt="produto">
    </li>
    <li>
      <img src="img/exemplo.jpg" alt="produto">
    </li>
    <li>
      <img src="img/exemplo.jpg" alt="produto">
    </li>
    <li>
      <img src="img/exemplo.jpg" alt="produto">
    </li>
    <li>
      <img src="img/exemplo.jpg" alt="produto">
    </li>
  </ul>
</section>

---

More correct way: https://jsfiddle.net/tkedrLe2/

.produtos ul li{
  width: 33.333%;
  float: left;
}

<section class="produtos">
  <ul>
    <li>
      <img src="img/exemplo.jpg" alt="produto">
    </li>
    <li>
      <img src="img/exemplo.jpg" alt="produto">
    </li>
    <li>
      <img src="img/exemplo.jpg" alt="produto">
    </li>
    <li>
      <img src="img/exemplo.jpg" alt="produto">
    </li>
    <li>
      <img src="img/exemplo.jpg" alt="produto">
    </li>
    <li>
      <img src="img/exemplo.jpg" alt="produto">
    </li>
  </ul>
</section>