CSS 网格：不确定为什么最后一行被压扁

Question

我有一个 CSS 网格，我在其中使用网格区域来组合一些网格单元（这里的代码笔：https://codepen.io/Chiz/pen/gOvKEoe）

代码如下：

<main>
  <div class="box1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div class="box10">10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
  <div>18</div>
  <div>19</div>
  <div>20</div>
  <div>21</div>
  <div>22</div>
  <div>23</div>
  <div>24</div>
  <div>25</div>
  <div>26</div>
  <div>27</div>
  <div>28</div>
  <div>29</div>
  <div>30</div>
</main>

*,
      *::before,
      *::after {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      body {
        border: 1px solid red;
        width: 1200px;
        margin: 0 auto;
        display: grid;
      }
      main {
        display: grid;
        grid-template: repeat(6, 240px) / repeat(5, 240px);
      }
      main div {
        border: 1px solid pink;
      }

/* below is the code that is causing the issue */

      .box1 {
        background-color: antiquewhite;
        grid-area: 1 / 1 / 3 / 3;
      }
      .box10 {
        background-color: burlywood;
        grid-area: 3 / 3 / 3 / 5;
      }

虽然我已将每个网格单元格设置为 240px x 240px，但最后一行似乎被压扁了。是什么原因造成的，我该如何停止？

谢谢。

Answer 1

您指定了 6 行 240px:

        grid-template: repeat(6, 240px) / repeat(5, 240px);

压缩的行是第 7 行。

Answer 2

您应该在网格模板一中添加它，因为您指定了 6，所以最后一行（第 7 行）没有任何垂直尺寸（高度）。

grid-template: repeat(7, 240px) / repeat(5, 240px);

CSS 网格：不确定为什么最后一行被压扁

CSS grid : Not sure why the last row is being squashed

css

css-grid