使用CSS网格将所有项目水平对齐到左侧
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用CSS网格将所有项目水平对齐到左侧相关的知识，希望对你有一定的参考价值。
我的物品数量未知，我希望它们水平堆叠到左侧
我要在项目之间保持固定的间隔
项目的宽度是未知的，可能会有变化
我知道我可以像下面那样使用flex，但是我想知道是否可以通过grid完成此工作。
#box
display: flex;
width: 300px;
outline: 1px solid blue;
.item
background: gray;
width: 50px;
height: 100px;
#box > * + *
margin-left: 10px;
<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>更新
增加了父级的宽度值，以更清楚地显示我要执行的操作-子级不应占用整个父级宽度（当然，除非有很多子级）。
答案
这里。我从您的示例中使用了相同的度量和大小。
取决于孩子的宽度
#box
display: inline-grid;
grid-auto-flow: column;
grid-template-columns: auto;
grid-auto-rows: 100px;
column-gap: 10px;
outline: 1px solid blue;
.item
background: gray;
width: 50px;
<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>以上是关于使用CSS网格将所有项目水平对齐到左侧的主要内容，如果未能解决你的问题，请参考以下文章