Grid system with simple 2X2 layout and fixed gap

Question

div {
  border: 1px solid red;
}
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

<div class="container">
  <div>Item1</div>
  <div>Item2Item2Item2Item2Item2Item2Item2Item2Item2Item2</div>
  <div>Item3 Item3 Item3 Item3 Item3 Item3 Item3</div>
  <div>Item4</div>
</div>

As above shows, a single unwrapped element (word) will expand the column size to more than 50%. But I don't want this to happen. How should I fix this? I cannot use grid-template-columns: 50% 50% since I need a fixed gap: 10px