Css 毫米并不总是一样的

我需要画背景网格并在网格上放置div。Div边必须与网格对齐。所有位置和调光必须以毫米为单位计算。不幸的是，div与网格有一些偏移，它们没有对齐

我甚至尝试了背景网格图像，而不是在css中绘制网格-没有帮助。 （在谷歌chrome上测试小提琴）

html:

---

你知道如何精确地将div与网格对齐吗？

我认为你应该将所有测量值转换为px。看看这个：你不能可靠地使用毫米。不同的屏幕尺寸每毫米有不同的像素数，并且不是每个浏览器都知道转换。那么打印呢？我想打印文档，并使1mm=1mm。我应该把像素转换成毫米的背面吗？毫米在印刷品中也不可靠（尽管变化比在屏幕上小）。

<div class="bg">
    <div class="widget widget1"></div>
    <div class="widget widget2"></div>
    <div class="widget widget3"></div>
</div>  

body {
    margin: 0;
    padding: 0;    
}

.bg {
    margin: 0;
    padding: 0;
    width: 100mm;
    height: 100mm;
    background-image: 
        linear-gradient(lightgray 1px, transparent 1px), 
        linear-gradient(90deg, lightgray 1px, transparent 1px); 
    background-size: 5mm 5mm;
    position: relative;
}

.widget {
    width: 10mm;
    height: 10mm;
    background-color: red;
    position: absolute;
    display: block;
    opacity: 0.4;
    filter: alpha(opacity=40);
}

.widget1 {
    top: 5mm;
    left: 5mm;
}

.widget2 {
    top: 35mm;
    left: 55mm;
}

.widget3 {
    top: 45mm;
    left: 85mm;
}