Is there a way to use a css grid to create something similar to the iTunes cover layout
where each tile shrinks to a min-width when the screen size is decreased. If shrinking no longer is possible, there are fewer elements placed in each row, but each tile now starts at max-size.
As far as I can see, css grid usually requires to define either a fixed width or a fixed number of columns?
I have set up a twiddle to play around a little, however so far I was unsuccessful at specifying a flexible layout, which would add new rows and columns when needed: https://jsfiddle.net/dnu6g8wt/
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</section>
section {
display: grid;
grid-auto-rows: auto;
grid-auto-flow: column;
grid-gap: 10px;
}
div {
min-width: 45px;
max-width: 50px;
background: gray;
}
I am not looking for a way that uses css grid, but sticking to css only would be preferred. The tiles being squares would be awesome, but I have no idea how one could create flexible titles with equal width and height using css only. I was able to create such a layout by using javascript in the past, however that gets complicated very quickly.
