Html 使用CSS网格将所有项目水平向左对齐

我有一个未知数量的项目，我希望他们水平堆放在左边

我想要两件物品之间有一个固定的间隙

项目的宽度未知，可能会有变化

我知道我可以像下面那样使用

flex

，但我想知道这是否可以通过

grid

实现

#框{
显示器：flex；
宽度：300px；
轮廓：1px纯蓝色；
}
.项目{
背景：灰色；
宽度：50px；
高度：100px；
}
#方框>*+*{
左边距：10px；
}

---

这里。我使用了与您示例中相同的度量和大小

取决于孩子的宽度

#框{
显示：内联网格；
网格自动流：列；
网格模板列：自动；
网格自动行：100px；
柱间距：10px；
轮廓：1px纯蓝色；
}
.项目{
背景：灰色；
宽度：50px；
}

请提供一些HTML，至少自己尝试一下。更改为

显示：网格并添加
网格自动流：列感谢您的努力，我们已使用有关父对象剩余间距的信息更新了问题。