When I list a bunch of items, but not enough to fill the div, I get ugly spaces in between rows. Is there a way to get rid of this spacing? I've tried using grid-auto-flow but it doesn't seem to work either. I'm not too proficient at CSS/SASS, but I speculate that it's my lack of specifying grid-template-rows, but I could be mistaken. In any case, here's what I have so far:
.Playlists {
margin: 0px;
padding: 0px;
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
grid-auto-flow: row dense;
height: 100%;
overflow-y: scroll;
}
Just an FYI, I don't want to use flex boxes here because I do not like how they handle item wrapping.
The ugly no no when there aren't enough items to fill the div:
The beautiful yes yes when there are enough items to fill the div:
