Grid that has uneven number of rows

Question

I would like to achieve the following grid

Basically have 5 rows in the first column and 3 rows in the second column.

Here is my try

.tableGrid {
  display:grid; 
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5); 
  row-gap: 6px;
}

       <div className='tableGrid'>
          <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>

This renders 2 columns with 4 rows each, but not 1 column with 5 rows and 1 column with 3 rows. I read that you could adjust it with repeat, but it does not seem to work in that case. Thanks for reading.

Answer 1

To achieve this you need to use the grid-row-start css property on the last element and also will fix the repeat() since repeat() has 2 arguments to work correctly.

The repeat() function takes two arguments MDN documentation

.tableGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, 1fr); /* changed */
  row-gap: 6px;
}

/* new style */
.tableGrid > div:nth-of-type(8) {
  grid-row-start: 5;
}

<div class="tableGrid">
  <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>