Css Grid layout in mm (for printing)

Question

I'm trying to create a grid layout to print items on a page. The units should be in millimeters but the result is far from correct. I'm using css grid layout to use flow since my items are random count but should be displayed 2x8 on each page.

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

The result should be a grid 2x8 cells on a A4 page (210x297mm), each cells should be 100mmx70mm but I get a grid 2x5.9 with cells 70mmx50mm. I'm using Chrome. What's wrong with my layout? Is it possible to define a precise layout for printing in CSS?

Answer 1

set widths in the grid will help you

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