我可以从中心填充网格容器吗?

Question

有没有办法从中心填充网格？

我有一个CSS网格容器，它有一个动态内容(它被更新，所以子项的数量不是固定的(，看起来像这样：

#container { 
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}

如果我填满了所有 4 列，它将如下所示：

1 2 3 4 //Numbers that represent containers children

这对我来说没关系，但是当我的主容器中只有两个div时，问题就来了，然后它看起来像这样：

1 2 0 0

我想要实现的是：

0 1 2 0

Answer 1

新答案：

如果你想坚持只grid，假设你只有四列，可能的配置是0 1 0 0、0 1 1 0、0 1 1 1、1 1 1 1，那么以下CSS工作：

.container {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
.col {
height: 50px;
background: green;
}
.col:first-child {
grid-column-start: 2;
}
.col:first-child:nth-last-child(4) {
grid-column-start: 1;
}

假设您有 HTML：

<div class="container">
<div class="col">
Col
</div>
<!-- Other Cols Here -->
</div>

工作小提琴

原答案：

对于网格，无法将动态数量的元素居中。网格布局适用于具有固定数量的元素的布局。

请参阅网格与弹性布局的使用。您的问题更适合通过 flex 解决，您在 flex 容器上使用justify-content: center来实现居中的孩子。

要实现居中子项，请在div 上修改#container样式：

#container { 
display: flex;
justify-content: center;
}

需要0 1 0 0、0 1 1 0、0 1 1 1、1 1 1 1并假设只有四列的场景：

.container {
display: flex;
justify-content: center;
}
.col {
width: 25%;
height: 50px;
background: green;
}
.col:last-child:not(:nth-child(even)):first-child {
margin-left: -25%;
}
.col:last-child:not(:nth-child(even)):not(:first-child) {
margin-right: -25%;
}

我假设你的标记将是这样的：

<div class="container">
<div class="col">
Col
</div>
<!-- Other Columns Go Here -->
</div>

工作小提琴

Answer 2

正如每个人都已经说过的那样，Flexbox 非常适合这个，但是(如果我没有错过任何东西(

以下属性的组合应该可以解决问题

grid-auto-flow: column;
grid-auto-columns: 25%; // assumes 4 columns
justify-content: center;

document.querySelectorAll('input')[0].onclick = () => { document.querySelector('[container]').append(document.createElement('div'))}
document.querySelectorAll('input')[1].onclick = () => {document.querySelector('[container]').innerHTML = '<div></div>';}

body * {
padding: 10px;
border: 1px solid;
}
[container] {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 25%;
justify-content: center;
}
[container]>div {
height: 50px;
background: orange;
}

<input type="button" value="Add Column" />
<input type="button" value="reset" />
<div container>
<div></div>
</div>