Grid thumbnails align to top vertically

Question

Is it possible to align grid items vertically on top, like with flexboxes?

But without manually defining grid span properties for lis.

I want the layout to work for any number of list elements

ul {
  position: absolute;
  left: 0;
  top: 0;
  width: 400px;
  height: 300px;
  border: 10px solid green;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  grid-auto-rows: minmax(25px, auto);
  justify-items: top;
  grid-gap: 1em;
  grid-row-gap: 1em;
  position: relative;
}

li {
  background: red;
  display: block;
  min-width: 100%;
  max-height: 25px;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Answer 1

https://developer.mozilla.org/en-US/docs/Web/CSS/align-content

The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.

ul {
  width: 400px;
  height: 300px;
  border: 10px solid green;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  grid-auto-rows: minmax(25px,auto);
  align-content:start;
  grid-gap: 1em;
}

li {
  background: red;
  display: block;
  min-width: 100%;
  max-height: 25px;/* ?? */
}

ul {
  counter-reset: items
}

li::before {
  counter-increment: items;
  content: counter(items);
}

* {
  padding: 0
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>