I'm working with a CSS Grid layout and trying to evenly distribute rows inside a fixed-height container using:
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));Here’s the full CSS and minimal HTML:
.container { height: 600px; width: 500px; margin: 200px auto; background-color: black; box-shadow: 0 6px 20px rgb(0 0 0 / 0.2); display: grid; grid-auto-flow: row; grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));}.box { color: white; font-size: 1.5rem; text-align: center;}<body><div class="container"><div class="box" style="background-color: #e53935">FIRST</div><div class="box" style="background-color: #d81b60">SECOND</div><div class="box" style="background-color: #8e24aa">THIRD</div><div class="box" style="background-color: #5e35b1">FOURTH</div><div class="box" style="background-color: #3949ab">FIFTH</div><div class="box" style="background-color: #1e88e5">SIXTH</div><div class="box" style="background-color: #00acc1">SEVENTH</div><div class="box" style="background-color: #00897b">EIGHTH</div></div></body>Problem:
The container has a fixed height of 600px and contains 8 items. Since each row uses minmax(100px, 1fr), I expected each of the 8 rows to get at least 100px.
However, the last two items (SEVENTH and EIGHTH) are only getting about 27px height each. Why is this happening?