CSS Grid - сделать случайное количество элементов, заполняющих ширину и высоту области просмотра

Question

Я немного покопался, но не могу найти решения этой проблемы.У меня есть случайный набор изображений (иногда это будет 1, иногда это будет 128), которые я хочу выстроить в сетке, которая занимает весь видовой экран.Если он не может занимать 100% высоты (если есть только одно изображение), это нормально, но я хочу, чтобы он по-прежнему отображал всю ширину экрана и не превышал высоту области просмотра.У меня проблема в том, что моя сетка все еще расширяется после 100vh.Есть идеи?

<ul id="logos" class="logo-list">
  <c:forEach var="company" items="${companies}">
    <c:set var="logo" value="${company.getCompanyLogoUrl()}" />
    <c:set var="site" value="${company.getCompanySiteUrl()}" />
    <li class="logo-list-item">
      <a href="${site}"><img src="${logo}" height="150" width="150" class="popup" /></a>
    </li>
  </c:forEach>
</ul>

Мой CSS пока:

img {
  max-width: 100%;
}

.logo-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: repeat(auto-fit, minmax(100px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
}

.logo-list-item {
  display: block;
}

А затем JSFiddle: https://jsfiddle.net/pqhe6sn1/