I noticed in Wikipedia https://en.wikipedia.org/wiki/Hercules#Modern_era that there is a gallery of unsorted lists that always resize themselves to fit the maximum width based on how many elements there are in a row. You can see this if you resize your browser window. After an image jumps to a new row it re-calculates the width of the remaining images to then fill out the full width of the row again.

I'm guessing this is done through javascript or jquery (instead of CSS) however I don't know how would someone get the number of elements that are currently in a single row to recalculate the width for each element in this case.

Is there a simple solution to this?

Below is the list implementation of this without the resizing:

ul{
  border: 1px solid #000;
  background-color: #eee;
  display: block;
  text-align: center;
  list-style-type: none;
  padding: 0;
}
li{
  padding-left: 0;
  display: inline-block;
  margin: 5px;
  vertical-align: left;
}

.block{
  width: 40px;
  height: 60px;
  background-color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li> <div class="block"></div> </li>
  <li> <div class="block"></div> </li>
  <li> <div class="block"></div> </li>
  <li> <div class="block"></div> </li>
  <li> <div class="block"></div> </li>
  <li> <div class="block"></div> </li>
</ul>