I am working with a dynamic set of elements, all the same size. My goal is to arrange these elements in a grid layout, organized in columns. The number of columns should adjust based on the width of the container, and the number of rows should adapt according to the total number of elements.
For instance, if there are 9 elements:
1 4 7
2 5 8
3 6 9
If the container width increases:
1 3 5 7 9
2 4 6 8
Or decreases:
1 6
2 7
3 8
4 9
5
This layout functions correctly when items are arranged by row, but not by column. Additionally, setting the number of rows explicitly works well, but using auto-fill for both rows and columns results in all elements being displayed in a single row.
Here is a straightforward example that I expect to render as a 3x3 grid: https://codepen.io/anon/pen/ZxPQNd
#grid {
width: 320px;
border: 1px solid red;
display: grid;
grid-gap: 10px;
grid-auto-flow: column;
grid-template-rows: repeat(auto-fill, 100px);
grid-template-columns: repeat(auto-fill, 100px);
grid-auto-columns: 100px;
grid-auto-rows: 100px;
}
#grid>div {
background: lime;
}<div id="grid">
<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>