How to right-align an incomplete CSS Grid row?

I have an unknown number of items that will display in a grid. When a row is incomplete, like the second row shown in the screenshots, I need the items to align to the right.

I can achieve the effect with direction: rtl, but that changes the order of the items, which I don't want to do.

How can I do this? Codepen available here to troubleshoot: https://codepen.io/keefblurgu/pen/gOvzWbw

Edit: Stack Snippet added

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.grid > div {
  padding: 10px;
  text-align: center;
  background-color: coral
}

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