How can I center 2 grid Items that are left justified?

Question

I'm trying to get these 2 items to center in together instead of floating to the right. It's part of a larger tool that will auto load team members and I want the layout to stay the same if there are 2 or 4 members in a row. That's why the grid-template-columns is set to 4.

.members.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 69px;
  grid-row-gap: 40px;
  text-align: center;
  grid-auto-columns: 1fr;
  justify-content: center;
  justify-items: center;
  margin: auto;
  text-align: center;
}

.members .teamMember {
  text-align: center;
}

.teamMember a img,
.teamMember a .nophotoContainer {
  border: 7px solid white;
  transition: border 1s;
}

.nophotoContainer {
  border-radius: 50%;
  position: relative;
  height: 300px;
  width: 300px;
  background-color: #032c41;
}

.nophotoContent {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}

<div class="members grid">
  <div class="teamMember">
    <a href="#">
      <div class="nophotoContainer has-background">
        <div class="nophotoContent">
          <h4>Kent H</h4>
          <h6>Member Role</h6>
        </div>
      </div>
    </a>
  </div>
  <div class="teamMember">
    <a href="#">
      <div class="nophotoContainer has-background">
        <div class="nophotoContent">
          <h4>Bruce H</h4>
          <h6>Member Role</h6>
        </div>
      </div>
    </a>
  </div>
</div>

Answer 1

Grid may not work in your layout, because the column tracks prevent automatic centering across the line. As an alternative, here's how you can use flexbox to center the items:

.members.grid {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
}

.teamMember a img,
.teamMember a .nophotoContainer {
  border: 7px solid white;
  transition: border 1s;
}

.nophotoContainer {
  border-radius: 50%;
  position: relative;
  height: 300px;
  width: 300px;
  background-color: #032c41;
}

.nophotoContent {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}

<div class="members grid">
  <div class="teamMember">
    <a href="#">
      <div class="nophotoContainer has-background">
        <div class="nophotoContent">
          <h4>Kent H</h4>
          <h6>Member Role</h6>
        </div>
      </div>
    </a>
  </div>
  <div class="teamMember">
    <a href="#">
      <div class="nophotoContainer has-background">
        <div class="nophotoContent">
          <h4>Bruce H</h4>
          <h6>Member Role</h6>
        </div>
      </div>
    </a>
  </div>

  <div class="teamMember">
    <a href="#">
      <div class="nophotoContainer has-background">
        <div class="nophotoContent">
          <h4>Bruce H</h4>
          <h6>Member Role</h6>
        </div>
      </div>
    </a>
  </div>

  <div class="teamMember">
    <a href="#">
      <div class="nophotoContainer has-background">
        <div class="nophotoContent">
          <h4>Bruce H</h4>
          <h6>Member Role</h6>
        </div>
      </div>
    </a>
  </div>

  <div class="teamMember">
    <a href="#">
      <div class="nophotoContainer has-background">
        <div class="nophotoContent">
          <h4>Bruce H</h4>
          <h6>Member Role</h6>
        </div>
      </div>
    </a>
  </div>
</div>