将 CSS Grid 内容从一列移动到另一列

Question

我正在学习 CSS Grid，但无法弄清楚如何将内容从第一列移动到第二列（关于桌面视图 +1200 Px）。 我想实现一些基本的中心对齐，就像 margin: 0 auto 一样。这就是为什么我将 1fr 放在 4 列之前和 1fr 放在 4 列之后的原因（grid-template-columns: 1fr repeat(4, minmax(auto, 250px)) 1fr;）。 但是内容适合第一列 - 这意味着将 4 个内容列居中。 我希望你明白我的意思。请展开窗口查看桌面宽度。

<https://jsfiddle.net/freshynek/d3bzLgvh/>.   

Answer 1

内容应进入第一列。您应该从您的模板中删除 1fr（这是一个 hack，不会起作用）。而是使用justify-content: center; 将div.grid 居中。

编辑： 理论上，您可以在第一张卡片之前添加一个空 div (<div></div>)。因此，第一列将为空，第二列将包含您想要的内容。但是，正如我所说，这是一种 hack，如果您正在学习如何使用网格，最好不要依赖 hack。