網格系統中不合格的網格線

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演示

Answer 2

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

檢查小提琴