Help with alignment of items/images in a div

Question

I’m doing a test with layouts to display images, and I have a question regarding the alignment of items within a div.

Basically, I have a set of images and I need to display them aligned, 3 per line.

I need to load the images automatically, which in practice makes it impossible for me to know the amount of images to be displayed and to place the html tags of the images manually in the source.

It happens that sometimes the amount of images to display causes about 1 or 2 images in the last line. In this case, for the layout and visuals of the page, I would like this 1 or 2 images that "remain" in the last line to be aligned to the center.

So therein lies my doubt. It is possible to center these images in this way, so as not to change the layout of the images of the other lines?

Here’s a snippet of code I’m using to illustrate:

.coluna {
     float: left;
     width: 33.33%;
     height: 33.33%;
     margin: 0 auto;
     display: inline-block;
     box-sizing: border-box;
}
.row::after {
   content: "";
   clear: both;
   display: table;
}

<div class="row">
  <div class="coluna">
    <img src="imagem1" alt="Teste" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem2" alt="Teste" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem3" alt="Teste" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem4" alt="Teste" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem5" alt="Teste" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem6" alt="Teste" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem7" alt="Teste" style="width:100%">
  </div>
</div>

Answer 1

It is possible yes, just remove the float: left from the class . column and add the text-align: center in the class . Row, this done only adjust the size of the columns:

Had stayed like this:

<style>
  .row{
    text-align: center;
  }

  .coluna {
     width: 30%;
     height: 33.33%;
     margin: 0 auto;
     display: inline-block;
     box-sizing: border-box;
  }

  .row::after {
     content: "";
     clear: both;
     display: table;
  }
</style>

<div class="row">
  <div class="coluna">
    <img src="imagem1" alt="Teste" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem2" alt="Teste" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem3" alt="Teste" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem4" alt="Teste" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem5" alt="Teste" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem6" alt="Teste" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem7" alt="Teste" style="width:100%">
  </div>
</div>

I hope I’ve helped!

Answer 2

The easiest way is to use the flexbox or grid in the outermost div. You can scale the columns automatically too but as you explained the 33%, I ended up leaving.

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.column {
  background: gray;
  width: 33%;
}
.column img {
  width: 100%;
}

<div class="container">
  <div class="column">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="column">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="column">
    <img src="https://via.placeholder.com/150" />
  </div>
    <div class="column">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="column">
    <img src="https://via.placeholder.com/150" />
  </div>
</div>