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

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>