CSS grid alignment problems/problem deleting column

Hello,

I have some (very) draft code but am having a problem with reducing the number of columns in a grid. The ‘test’ data currently in each final cell is only to prevent everything else from moving out of alignment. I only want there to be 8 columns (I set the file up with 9 and have been unable to change this (I tried grid-template-columns and tried deleting the data from the final (furthest column) cells, in case that column had been implicitly created.

Does anyone know how I can get rid of this final (9th) column completely please?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>tbc</title>
  </head>

  <body>
    <div class="entire-page-1">
      <input class="date-range" placeholder="Date range" />
      <div class="space">SPACE</div>
      <div classs="day">Monday<input class="date" placeholder="date" /></div>
      <div class="container-day-1">
        <div class="item-2 btn"><button class="circle-button"></button></div>

        <input class="task task-1 item-12" />
        <button class="pomodoro-btn btn-1 item-4"></button>
        <!--<div class="item item-2">2</div>-->
        <button class="pomodoro-btn btn-2 item-5"></button>
        <button class="pomodoro-btn btn-3 item-6"></button>
        <button class="pomodoro-btn btn-4 item-7"></button>
        <button class="pomodoro-btn btn-5 item-8"></button>
        <button class="pomodoro-btn btn-6 item-9"></button>
        <div>test</div>
        <div class="item-11 btn">
          <button class="circle-button"></button>
        </div>

        <!--<input class="date" placeholder="Date" />-->

        <input class="task task-1 item-12" />

        <button class="pomodoro-btn btn-7 item-13"></button>

        <button class="pomodoro-btn btn-8 item-14"></button>
        <button class="pomodoro-btn btn-9 item-15"></button>
        <button class="pomodoro-btn btn-10 item-16"></button>
        <button class="pomodoro-btn btn-11 item-17"></button>
        <button class="pomodoro-btn btn-12 item-18"></button>
        <div>test</div>
        <div class="btn item-20">
          <button class="circle-button"></button>
        </div>

        <input class="task task-1 item-21" />
        <button class="pomodoro-btn btn-8 item-22"></button>
        <button class="pomodoro-btn btn-9 item-23"></button>
        <button class="pomodoro-btn btn-10 item-24"></button>
        <button class="pomodoro-btn btn-11 item-25"></button>
        <button class="pomodoro-btn btn-12 item-26"></button>
        <button class="pomodoro-btn btn-12 item-27"></button>
        <div>test</div>
        <div class="item item-29 btn">
          <button class="circle-button"></button>
        </div>

        <input class="task task-1 item-30" />
        <button class="pomodoro-btn btn-8 item-31"></button>
        <button class="pomodoro-btn btn-9 item-32"></button>
        <button class="pomodoro-btn btn-10 item-33"></button>
        <button class="pomodoro-btn btn-11 item-34"></button>
        <button class="pomodoro-btn btn-12 item-35"></button>
        <button class="pomodoro-btn btn-12 item-36"></button>
        <div>test</div>
        <div class="btn item-1 item-38">
          <button class="circle-button item-39"></button>
        </div>

        <input class="task task-1 item-40" />
        <button class="pomodoro-btn btn-8 item-41"></button>
        <button class="pomodoro-btn btn-9 item-42"></button>
        <button class="pomodoro-btn btn-10 item-43"></button>
        <button class="pomodoro-btn btn-11 item-44"></button>
        <button class="pomodoro-btn btn-12 item-45"></button>
        <button class="pomodoro-btn btn-12 item-46"></button>
        <!--
        <div>test</div>
        -->
        <div>test</div>
        <div class="btn item-1 item-48">
          <button class="circle-button"></button>
        </div>

        <input class="task task-1 item-49" />
        <button class="pomodoro-btn btn-8 item-50"></button>
        <button class="pomodoro-btn btn-9 item-51"></button>
        <button class="pomodoro-btn btn-10 item-52"></button>
        <button class="pomodoro-btn btn-11 item-53"></button>
        <button class="pomodoro-btn btn-12 item-54"></button>
        <button class="pomodoro-btn btn-12 item-55"></button>
        <input
          class="gratitude gratitude-1"
          placeholder="Today, I am grateful for..."
        />
        <input
          class="gratitude gratitude-2"
          placeholder="Today, I am grateful for..."
        />
        <input
          class="gratitude gratitude-3"
          placeholder="Today, I am grateful for..."
        />
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>
body {
}

.container-day-1,
.container-day-2 {
  display: grid;
  grid-template-rows: 25px 25px 25px 25px 25px 25px 25px 25px 25px;
  /*grid-template-columns: 2fr 43fr 1fr 1fr 1fr 1fr 1fr 1fr;*/

  /*100px 1000px 25px 25px 25px 25px 25px 25px 25px 25px;*/
  /* grid-template-columns: 1fr 43fr 1fr 1fr;*/

  border: 2px solid black;
  background-color: green;
}

.entire-page-1 {
  background-color: blue;
}

.item {
  border: 1px solid black;
}

.circle-button {
  height: 20px;
  width: 20px;
  border-radius: 50%;
}

.entire-page-1 {
  margin-left: 300px;
  margin-right: 300px;
}

.Monday {
  width: 70px;
  /*grid-row: span 6;*/
}

.gratitude {
  grid-column: span 9;
}

/*.circle-button:active {
  background: blue;
}

.circle-button:focus {
  background: red;
}
*/
.entire-page-1 {
  margin: 20px 300px 20px 300px;
}

The only reason you have more than one column is because of the grid-column: span 9 style you have on .gratitude.

Each grid container should have the same number of elements as you want there to be columns. You can reuse the container class.

Also, use the repeat() function if you need to create multiple explicit row/colums.

Example code
<div class="container">
  <div class="grid col-8">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
  </div>
  <div class="grid col-8">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
  </div>
</div>
.container {
  width: min(1200px, 85%);
  margin-inline: auto;
}

.grid {
  display: grid;
  justify-items: center;
}

.col-8 {
  grid-template-columns: repeat(8, 1fr);
}

Excellent, thank you. Completely forgot about that span.