我可以从中心填充网格容器吗？答案

【问题标题】：Can I fill a grid container from the center?我可以从中心填充网格容器吗？
【发布时间】：2020-06-30 12:27:53
【问题描述】：

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

我有一个 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

【问题讨论】：

如果你只有一个孩子和4列你会怎么做？
我不知道你的用例是什么，但使用 flexbox 通常是一种更容易将它们居中的解决方案。
@TemaniAfif 0 1 0 0
@Rod911 ，我会调查一下，但我还是先关注网格。
为什么不将单元格 1 和 4 的动态内容直接设为 &nbsp;？然后 div 会在那里，但不显示任何内容。

标签： html css css-grid

【解决方案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>

Working Fiddle

原始答案：

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

参考grid vs flex 布局的使用。您的问题更适合通过 flex 解决，您在 flex 容器上使用 justify-content: center 来实现居中子级。

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

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

Working Fiddle

【讨论】：

@Paulie_D 也许添加代码可能有助于改变您的决定？如果您还提到了您希望在我的回答中看到的内容，我想您会更有帮助。 :)
@MuhammadTalhaAkbar 请不要在选票问题上纠缠人们。投票是匿名的——你无法确定投票来自哪里，不断的唠叨无助于扭转投票。就您的声誉而言，一次投反对票不会对您产生太大影响。
@HereticMonkey 我猜你是对的。下次我会注意的。
@Paulie_D 感谢您的反馈，我看到在 cmets 中讨论了这种情况，而不是在原始问题中。查看我的编辑以适应该场景或 3 columns 场景。
我现在添加了 grid 唯一的解决方案，假设为 4 列。

【解决方案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>

【讨论】：