Как организовать вывод фото с названиями?(получается не ровно)

Я хочу создать вывод фото с названиями из базы данных. У меня есть код который выполняет это действие, но очень криво выводит, как реализовать красивый вывод с помощью css? Вот код вывода:

    <div class="type_1">
  <div class="fotos">
    <?php
    // echo "<div class='foto'>";
    while ($dd= mysqli_fetch_assoc($sqll)) {
      // echo "<span>".$dd['name']."</span>";
      // echo "<img src='/img/foto/".$dd["name_file_all"]."'>";
      ?>
      <a href="/article/<?=$article->id?>">
      <div class="article-short">
        <div class="name" style="float:left; padding:0px 30px 40px 0px;"><?php
          echo "<span>".$dd['name']."</span>";?>
        </div><br>
        <div class="img"><?php
          echo "<img src='/img/foto/".$dd["name_file_all"]."'>";?>
        </div>
      </div>
      </a>
      <?php
    }
  ?>
<p></p>
</div></div></div>

css:

div.fotos img{
  width: 20%;
  height: 40%;
}

Вот что у меня получается:

Как сделать ровно?