CSS网格布局被任何后续HTML元素重叠

Question

下面的HTML和CSS以及SVG编码产生了一个合适的CSS网格布局，但HTML中跟随它的小元素显示为与网格重叠而不是跟随网格。这是Mozilla标准的实验状态，因此必须在Chrome Canary或Mozilla Experimental中运行，或者在标准的最近IE中运行。

我已经在整个网络上研究了这个问题，所示的代码如下所示，但我找不到任何避免这种重叠的例子。

代码：

＆＃13;

＆＃13;

// (3)   ctx.write(obj);

＆＃13;

div.kybd-tries-pxfixed {
  color: black;
  background-color: orange;
  border: 3px dotted black;
  width: 200px; /* 300px; */
  height: 200px; /* 50px; */
  font-family: Times, "Times New Roman", Georgia, serif;
  font-size: 3vh; /* 1.4rem;*/ /* 14px; */
  /* border: 5px solid black; */
}

#kybdgrd{
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto;
  page-break-after: always;
}

#kybdTryPxfixed-01-01   { grid-column: 1; grid-row: 1; }
#kybdTryPxfixed-02-01   { grid-column: 2; grid-row: 1; }
#kybdTryPxfixed-03-01   { grid-column: 3; grid-row: 1; }
#kybdTryPxfixed-04-01   { grid-column: 4; grid-row: 1; }
#kybdTryPxfixed-01-02   { grid-column: 1; grid-row: 2; }
#kybdTryPxfixed-02-02   { grid-column: 2; grid-row: 2; }
#kybdTryPxfixed-03-02   { grid-column: 3; grid-row: 2; }
#kybdTryPxfixed-04-02   { grid-column: 4; grid-row: 2; }
#kybdTryPxfixed-01-03   { grid-column: 1; grid-row: 3; }
#kybdTryPxfixed-02-03   { grid-column: 2; grid-row: 3; }
#kybdTryPxfixed-03-03   { grid-column: 3; grid-row: 3; }
#kybdTryPxfixed-04-03   { grid-column: 4; grid-row: 3; }
#kybdTryPxfixed-01-04   { grid-column: 1; grid-row: 4; }
#kybdTryPxfixed-02-04   { grid-column: 2; grid-row: 4; }
#kybdTryPxfixed-03-04   { grid-column: 3; grid-row: 4; }
#kybdTryPxfixed-04-04   { grid-column: 4; grid-row: 4; }

＆＃13;

＆＃13;

＆＃13;