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

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