如何实现动态CSS Grid项目从左侧开始排列

嘿，我懂你遇到的这个小麻烦啦——其实这个问题的根源在于Grid容器的默认对齐规则，咱们一步步来搞定：

问题原因 #

你当前的.container用了grid-template-columns: auto auto auto，这会创建3列宽度由内容决定的网格。当项目数量少于3个时，剩余的空列宽度会被压缩至0，此时整个网格的总宽度会小于容器宽度。再加上Grid容器默认的justify-items是stretch（会让项目填满单元格宽度），双重作用下就会让项目看起来是居中显示的。

解决方案 #

只需要给.container添加两个关键属性就能解决：

• justify-content: start：强制整个网格轨道在容器内左对齐，不管网格总宽度是否小于容器宽度
• justify-items: start：让项目在各自的单元格内左对齐，而不是填满整个单元格宽度

修改后的代码如下：

.container {
 padding: 16px 24px;
 display: grid;
 grid-column-gap: 1rem;
 grid-row-gap: 1rem;
 grid-template-columns: auto auto auto;
 justify-content: start; /* 新增：网格轨道整体左对齐 */
 justify-items: start; /* 新增：项目在单元格内左对齐 */
}

如果你的需求是保持3列宽度平分容器空间（而非由内容决定），那可以把grid-template-columns改成repeat(3, minmax(0, 1fr))，这样不管有多少项目，每列都会平分宽度，项目也会自然左对齐：

.container {
 padding: 16px 24px;
 display: grid;
 grid-column-gap: 1rem;
 grid-row-gap: 1rem;
 grid-template-columns: repeat(3, minmax(0, 1fr)); /* 改为平分3列 */
 justify-items: start; /* 项目在单元格内左对齐 */
}

你可以根据自己的实际布局需求选其中一种方案哦～

内容的提问来源于stack exchange，提问作者Skygazer