Grid with 1fr columns resulting in unequal column widths

Question

I have a grid in which I expect all the grid columns to have equal size but the first column is bigger for a reason I don't understand.

The grid looks like this:

.grid {
  display: grid;
  grid-template-columns: repeat(24, 50px);
  grid-template-rows: repeat(5, 50px);
  gap: 5px;
  /* override grid-template-columns */
  grid-template-columns: repeat(24, 1fr);
}

.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  background: lightblue;
  grid-row-start: 1;
  grid-row-end: span 1;
  grid-column-end: span 1;
}

.grid-item-1 {
  background: lightgray;
  grid-column-start: 1;
  /* grid-column-end: span 2; */
  width: 400px;
}

.grid-item-2 {
  grid-column-start: 2;
}

.grid-item-3 {
  grid-column-start: 3;
}

<div class="grid">
  <div class="grid-item grid-item-1">1</div>
  <div class="grid-item grid-item-2">2</div>
  <div class="grid-item grid-item-3">3</div>
</div>

As you can see the first column is bigger with size of 400px.

If I define the grid columns with px units instead of fr by removing the line with grid-template-columns: repeat(24, 1fr) then my grid will have equal sized columns:

.grid {
  display: grid;
  grid-template-columns: repeat(24, 50px);
  grid-template-rows: repeat(5, 50px);
  gap: 5px;
}

.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  background: lightblue;
  grid-row-start: 1;
  grid-row-end: span 1;
  grid-column-end: span 1;
}

.grid-item-1 {
  background: lightgray;
  grid-column-start: 1;
  /* grid-column-end: span 2; */
  width: 400px;
}

.grid-item-2 {
  grid-column-start: 2;
}

.grid-item-3 {
  grid-column-start: 3;
}

<div class="grid">
  <div class="grid-item grid-item-1">1</div>
  <div class="grid-item grid-item-2">2</div>
  <div class="grid-item grid-item-3">3</div>
</div>

Alternatively, if I change the value of grid-column-end of the first grid item to be other than 1 then my grid will also have equal sized columns:

.grid {
  display: grid;
  grid-template-columns: repeat(24, 50px);
  grid-template-rows: repeat(5, 50px);
  gap: 5px;
  /* override grid-template-columns */
  grid-template-columns: repeat(24, 1fr);
}

.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  background: lightblue;
  grid-row-start: 1;
  grid-row-end: span 1;
  grid-column-end: span 1;
}

.grid-item-1 {
  background: lightgray;
  grid-column-start: 1;
  grid-column-end: span 2;
  width: 400px;
}

.grid-item-2 {
  grid-column-start: 2;
}

.grid-item-3 {
  grid-column-start: 3;
}

<div class="grid">
  <div class="grid-item grid-item-1">1</div>
  <div class="grid-item grid-item-2">2</div>
  <div class="grid-item grid-item-3">3</div>
</div>

Why is this happening?

How can I still have the desired equal columns grid without changing the grid-template-columns of the grid or the grid-column-end of the first grid item or the width of the first grid item?