Question

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

我的HTML：

<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>

我的CSS：

@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;
  }

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

Answer 1

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

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

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

1 个答案: