html - 如果行未满，css 网格对齐内容中心

Question

所以我想知道如果行没有填满，display: grid 是否可以像 flexbox 一样将其元素居中。

例子:

for (let i = 0; i < 3; i++)
{
 
  $("#main").append($("<div class='item'>test</div>"))
  $("#flex").append($("<div class='flex-item'>test</div>"))
}

#main {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.item {
  border: 1px solid black;
  height: 100px;
}


#flex {
  display: flex;
  width: 100%;
  justify-content: center;
}

.flex-item {
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
</div>

<div id="flex">
  
</div>

Answer 1

在 grid-template-columns 中应用 auto 而不是 1fr。然后为您的元素应用您想要的宽度。它会产生预期的结果。

 #main {
   display: grid;
   grid-template-columns: repeat(6, auto);
   width: 100%;
   height: 100%;
   align-items: center;
   justify-content: center;  
}
.item {
   border: 1px solid black;
   height: 100px;
   width:100px;
}

DEMO

更新:

如果您不想固定列宽，则使用 vw 根据您的屏幕应用动态宽度。

.item {
   border: 1px solid black;
   content: "test";
   height: 100px;
   width:16vw;
}

DEMO