网格系统中不合格的网格线

Question

在我相对简单的网格中，我正试图设置“不符合”的单元格/网格线（缺乏更好的措辞）。

HTML：

<table>
  <tr>
    <td class="a"></td>
    <td class="b"></td>
    <td class="c"></td>
    <td class="d">Text</td>
    <td class="e"></td>
    <td class="f">
      <button>Btn</button>
    </td>
  </tr>
</table>

CSS网格：

table {
    width: 100%;
}

tr {
    text-align: center;
    display: grid;
    height: 200px;
    grid-template-columns: 25% 25% 25% 25% 1fr;
    grid-template-rows: 70% 30%;
}

.a {
    grid-row: 1;
    background: green;
}

.b {
    grid-row: 1;
    background: blue;
}

.c {
    grid-row: 1;
    background: red;
}

.d {
    grid-row: 1;
    background: darkmagenta;
}

.e {
    grid-column: 1 / span 3;
    background: gray;
}

.f {
    grid-column: 4;
    background: purple;
}

https://jsfiddle.net/zp1s3ca5/

这给了我：

但是，我需要让单元格d的高度更少，并且单元格f 更多。

像这样：

我似乎无法“打破”行线。我该怎么做？

PS：我考虑过行挖掘单元格d + f，并在该单元格中设置另一个网格。问题是，我需要在移动视图上重新排列单元格（单元格d在顶部，单元格f在底部），所以我看不出那是怎么回事工作

Answer 1

您已为网格容器创建了两行：

grid-template-rows: 70% 30%;

这是您为创建网格区域设置的限制。

相反，创建更多行，然后根据需要跨越网格区域。这为您提供了更大的灵活性您创建的行越多，网格区域就越精确。试试这个：

grid-template-rows: repeat(10, 10%);   

table {
  width: 100%;
  border: 1px solid red;
}

tr {
  text-align: center;
  display: grid;
  height: 200px;
  grid-template-columns: 25% 25% 25% 25% 1fr;
  grid-template-rows: repeat(10, 10%); /* ADJUSTMENT */
}

.a {
  grid-row: 1 / span 7;
  background: green;
}

.b {
  grid-row: 1 / span 7;
  background: blue;
}

.c {
  grid-row: 1 / span 7;
  background: red;
}

.d {
  grid-row: 1 / span 5;
  background: yellow;
}

.e {
  grid-row: 8 / span 3;
  grid-column: 1 / span 3;
  background: gray;
}

.f {
  grid-row: 6 / span 5;
  grid-column: 4;
  background: purple;
}

<table>
  <tr>
    <td class="a"></td>
    <td class="b"></td>
    <td class="c"></td>
    <td class="d">Text</td>
    <td class="e"></td>
    <td class="f"><button>Btn</button></td>
  </tr>
</table>

jsFiddle demo

Answer 2

您可以添加另一行grid-template-rows: 60% 10% 30%; - 按照您的意愿打破70％。 然后使用要展开的div的颜色为要更改的div着色。

检查fiddle