我如何居中2网格项目左对齐?

Question

我试图让这两个项目的中心在一起，而不是浮动到右边。这是一个更大的工具的一部分，将自动加载团队成员，我希望布局保持不变，如果有2或4个成员在一排。这就是为什么grid-template-columns被设置为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

网格可能无法在您的布局中工作，因为列轨道阻止自动居中。作为一种替代方法，以下是如何使用flexx来居中项:

.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>