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

I've a CSS grid where I use grid-area to combine some grid cells (codepen here: https://codepen.io/Chiz/pen/gOvKEoe)

Here's the code:

<main>
  <div >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 >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;
      }

Although I've set the grid cells to be 240px x 240px each, the last row seems to get squashed. What is causing this and how do I stop this?

Thanks.

CodePudding user response：

You should add this in the grid template one because you have specified 6 so the last row (7th row) is not having any vertical dimensions (height).

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

CodePudding user response：

You've specified 6 rows of 240px:

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

The squished row is 7th row.