I'm in the process of creating a CSS grid. Here is a snippet of the CSS I am using:
div.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
Within my HTML code, there are exactly 6 items:
<div class=stats>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
</div>
When viewed on a phone, it displays as a neat 2 columns layout:
| Item1 | Item2 |
| Item3 | Item4 |
| Item5 | Item6 |
On a widescreen device (PC or horizontal tablet), it transforms into a sleek 6 columns layout:
| Item1 | Item2 | Item3 | Item4 | Item5 | Item6 |
However, when viewed horizontally on a phone, it shows 5 items in the first row and 1 item in the second row:
| Item1 | Item2 | Item3 | Item4 | Item5 |
| Item6 |
And when viewed vertically on a large screen (like a tablet), it arranges as 4 items in the first row and 2 items in the second row:
| Item1 | Item2 | Item3 | Item4 |
| Item5 | Item6 |
Is there a way to instruct the CSS to consistently maintain an equal number of items in each row, such as having 3 items in both the first and second rows for "middle ground" screens?
| Item1 | Item2 | Item3 |
| Item4 | Item5 | Item6 |
I have experimented with various options like auto-fill, minmax(3fr, 1fr), percentage values, different grid-template-rows values, and even tried masonry layouts, but haven't found a solution yet.