How can I vertically align grid items at the top without manually setting grid span properties for li elements?
I need the layout to be flexible and 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>