extend css grid to rulers

src/editor/templates/rulersTemplate.js

@@ -5,59 +5,40 @@ rulersTemplate.innerHTML = `
  
   /* Rulers
 ——————————————————————————————————————*/
-#rulers {
-  position: relative;
-  top: -14px;
-}
-#rulers > div {
+
+#ruler_corner {
   background: var(--ruler-color);
+  grid-area: corner;
+  width: 15px;
+  height: 15px;
   z-index: 1;
   overflow: hidden;
 }
 
-#ruler_corner {
-  top: 41px;
-  left: 41px;
-  width: 15px;
-  height: 15px;
-}
-
 #ruler_x {
+  background: var(--ruler-color);
+  grid-area: rulerX;
   height: 15px;
-  top: 41px;
-  left: 56px;
-  right: 30px;
   border-bottom: 1px solid;
   border-left: 1px solid #777;
+  z-index: 1;
+  overflow: hidden;
 }
 
 #ruler_y {
+  background: var(--ruler-color);
+  grid-area: rulerY;
   width: 15px;
-  top: 55px;
-  left: 41px;
-  bottom: 41px;
   border-right: 1px solid;
   border-top: 1px solid #777;
-}
-
-#ruler_x canvas:first-child {
-  margin-left: -16px;
+  z-index: 1;
+  overflow: hidden;
 }
 
 #ruler_x canvas {
   float: left;
 }
-
-#ruler_y canvas {
-  margin-top: -16px;
-}
-
-#ruler_x > div,
-#ruler_y > div {
-  overflow: hidden;
-}
   </style>
-  <div id="rulers">
     <div id="ruler_corner"></div>
     <div id="ruler_x">
       <div>
@@ -69,7 +50,6 @@ rulersTemplate.innerHTML = `
         <canvas width="15"></canvas>
       </div>
     </div>
-  </div>
 `;
 
 export default rulersTemplate;