Line height rendering differently across browsers - html

Question

I am creating a Grid layout like the following:
Each row contains 3 items and a divider line after these (and before next row).
Code is as follows:
HTML:
<div class="container">
<div class="item">ab</div> <!-- item -->
<div class="item">cdef</div> <!-- item -->
<div class="item">ghi</div> <!-- item -->
<div class="line"></div> <!-- divider line -->
<div class="item">jkl</div>
<div class="item">mno</div>
<div class="item">pq</div>
<div class="line"></div>
<div class="item">rs</div>
<div class="item">tuvw</div>
<div class="item">xyz</div>
<div class="line"></div>
</div>
CSS:
.container {
display: grid;
grid-template-columns: 1fr 1fr min-content;
}
.line {
grid-column: 1/4;
height: 1px;
width: 100%;
background: blue;
}
The problem is that the height of the divider line has a strange behavior. The following screenshots are taken from different browsers (Chrome & Firefox). Each time, one of the lines is rendered taller:
Inspecting DOM using Chrome Tools, height is always shown as 1px (as written in CSS). Therefore, it seems to be a rendering problem.
I suppose the problem is reproducible with this fiddle: https://jsfiddle.net/o96avqe8/
UPDATE:
The problem has nothing to do with Grid. It even occurs in the following minimal example:
HTML:
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
CSS:
.line {
width: 100%;
height: 1px;
background: blue;
margin-bottom: 20px;
}

Answer 1

I was not able to reproduce the problem you are describing.
Using your code, the layout renders the same on Firefox and Chrome.
But here's an idea that may fix the problem you are seeing: Try a different approach for generating the lines.
remove the lines from the HTML (for the sake of cleaner mark-up, they shouldn't be there anyway)
set a background color on the container
use the grid-row-gap property to generate the lines
.container {
display: grid;
grid-template-columns: 1fr 1fr min-content;
grid-row-gap: 1px;
background-color: blue;
border-bottom: 1px solid blue;
}
.item {
background-color: white;
}
<div class="container">
<div class="item">ab</div>
<div class="item">cdef</div>
<div class="item">ghi</div>
<div class="item">jkl</div>
<div class="item">mno</div>
<div class="item">pq</div>
<div class="item">rs</div>
<div class="item">tuvw</div>
<div class="item">xyz</div>
</div>