I have this very simple grid of buttons, like a telephone dial pad. The last row does not have enough items to fill it, and I want that row’s items lined up to the right so that the gap is on the left. justify-content, align-content, justify-items, and align-items do not do this. Please do not tell me to set one of those properties to end unless you have a codepen showing that it works, because it does not accomplish this.

Is it even possible to do this with css grid? I’m aware I could put in an invisible “bumper” div to shunt that row over, but I’m just wondering if it’s possible to do this with CSS alone.

<div className="inputPanel">
        <div className="button">1</div>
        <div className="button">2</div>
        <div className="button">3</div>
        <div className="button">4</div>
        <div className="button">5</div>
        <div className="button">6</div>
        <div className="button">7</div>
        <div className="button">8</div>
        <div className="button">9</div>
        <div className="button">0</div>
        <div className="button">←</div>
      </div>

with css:

  .inputPanel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
    margin-top: 30px;

    .button {
      padding: 20px;
      text-align: center;
      background-color: #d3d6da;
      border: 1px solid #ccc;
      border-radius: 2px;
      font-size: 24px;
      cursor: pointer;
    }
  }