以毫米为单位的 Css 网格布局（用于打印）

Question

我正在尝试创建一个网格布局以在页面上打印项目。单位应该以毫米为单位，但结果远非正确。 我使用 css 网格布局来使用流，因为我的项目是随机计数的，但应该在每页上显示 2x8。

    @media all {
      @page {
        size: 210mm 297mm;
        margin-top: 18mm;
        margin-bottom: 18mm;
        margin-left: 4mm;
        margin-right: 4mm;
      }
      .passcodeCell {
        width: 100mm;
        height: 70mm;
        border-style: dashed;
        align-content: center;
        position: relative;
      }
      .passcodeGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-column-gap: 3mm;
        align-items: center;
      }

    <div class="passcodeGrid">
      <div class="passcodeCell"></div>
      <div class="passcodeCell"></div>
      <div class="passcodeCell"></div>
      <div class="passcodeCell"></div>
      <div class="passcodeCell"></div>
      <div class="passcodeCell"></div>
      <div class="passcodeCell"></div>
      <div class="passcodeCell"></div>
      <div class="passcodeCell"></div>
    </div>

结果应该是 A4 页面 (210x297mm) 上的网格 2x8 单元格，每个单元格应该是 100mmx70mm，但我得到一个网格 2x5.9，单元格为 70mmx50mm。我正在使用 Chrome。 我的布局有什么问题？是否可以在 CSS 中定义精确的打印布局？

Answer 1

在网格中设置宽度会对您有所帮助

.passcodeGrid {
  display: grid;
  grid-template-rows: repeat(4, 70mm);
  grid-template-columns: repeat(2, 100mm);
}