creates a grid with dashed lines

grid.php

<?php
$dt = 40;
$max = 16 * $dt;
?>
<style>
  .grid {
    position: relative;
    border: unset;
    width: 100%;
    height: <?php echo($max . 'px')?>;
    margin-top: 6em;
    font-size: 10px;
  }
  .grid-h {
    position: absolute;
    left: 0;
    width: <?php echo(($max - $dt) . 'px')?>;
    border: unset;
    border-top: 1px dashed black;
    margin: 0 3em;
    margin-top: 3em;
  }
  .grid-h::before {
    content: attr(data-px);
    margin-left: -3em;
    line-height: 0;
  }
  .grid-v {
    position: absolute;
    top: 0;
    height: <?php echo($max - $dt) ?>px;
    border: unset;
    border-left: 1px dashed black;
    margin: 3em 0;
    margin-left: 3em;
  }
  .grid-v::before {
    position: absolute;
    top: -2em;
    content: attr(data-px);
    margin-left: -1em;
  }
</style>

<div class="grid">
  <?php
  $px = 0;
  for ($i = 0; $i < $max; $i = $i + $dt) {
    echo('<div class="grid-h" data-px="' . $px . 'px" style="top: ' . $i . 'px" ></div>');
    echo('<div class="grid-v" data-px="' . $px . 'px" style="left: ' . $i . 'px" ></div>');
    $px = $px + 50;
  }
  ?>
</div>