使用柔性容器和flex-wrap: wrap设置您可以使用将溢出的项目对齐到中心justify-content: center.
有没有办法使用 CSS 网格实现溢出网格项的相同行为？
我创建了一支显示所需弯曲行为的笔
.container-flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.container-flex .item {
width: 33.33%;
background: green;
border: 1px solid;
}
.container-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.container-grid .item {
background: red;
border: 1px solid;
}
* {
box-sizing: border-box;
}
<h3>Flex</h3>
<div class="container-flex">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<h3>Grid</h3>
<div class="container-grid">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
https://codepen.io/JoeHastings/pen/PeEjjR
Flex 和 Grid 是不同的动物，因此在 Flex 中简单的行为可能无法很好地转化为网格。
弹性项目可以在容器中居中，因为弹性布局可以与柔性线。柔性线是不相交行或列。
当弹性项目被要求在弹性行中居中时，它可以访问整行上的可用空间。这使得居中变得简单和容易。
然而，在网格布局中，有轨道，它们是相交行和列。例如，在您的布局中有三列。这些列穿过行，将其分为三个独立的部分，并且网格项被限制在一个部分中。
因此，网格项无法使用关键字对齐属性（例如justify-content or justify-self）因为相交的轨道限制了运动。
可以使网格区域跨越整个行/列，然后清除整个轨道的道路，允许网格项目水平居中（justify-content: center）或垂直（align-self: center), but 此行为必须明确定义.
对于要在动态布局中跨行居中的网格项，容器只需要有一列，或者需要使用类似的方法将项目显式移动到中心基于行的布局。否则，请使用弹性盒。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
