Css Расположение сетки в мм (для печати) - PullRequest
Новая
       26

Css Расположение сетки в мм (для печати)

0 голосов
/ 24 сентября 2018

Я пытаюсь создать сетку для печати элементов на странице.Единицы должны быть в миллиметрах, но результат далек от правильного.Я использую сетку CSS, чтобы использовать поток, поскольку мои элементы имеют произвольный счет, но должны отображаться 2х8 на каждой странице.

Мой 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;
  }

Результатом должна быть ячейка сетки 2x8 на странице формата А4 (210x297 мм), каждая ячейка должна иметь размер 100xx70 мм, но я получаю сетку 2x5,9 с ячейками 70mmx50mm.Я использую Chrome.Что не так с моим макетом?Можно ли определить точный макет для печати в CSS?

1 Ответ

0 голосов
/ 31 мая 2019

установка ширины в сетке поможет вам 

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