使动态网格项目从左开始

Question

也许这是一个微不足道的问题，但我仍在学习 CSS 网格。我在 CSS 网格项目放置方面遇到问题，其中的项目是动态的。

当我有很多项目时，没关系:

当我有一个/两个项目时，它居中。

我希望它从左边开始。

我的代码：

.container {
  padding: 16px 24px;
  display: grid;

  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-columns: auto auto auto;

}

希望你能帮助我，谢谢！

Answer 1

在某些情况下，您可以混合使用网格和弹性规则。对于这个，试试：

justify-content: flex-start

当您有面向行的项目时，它会控制它们的水平对齐方式。

align-items: center 将 - 默认情况下 - 假定默认弹性规则是行 - 垂直居中项目 - 但不是水平居中。

您可以在这里阅读更多内容：

Make Dynamic Grid Items Start From Left