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

Question

1. 我有未知数量的项目，我希望它们水平堆叠在左侧

2. 我想要项目之间的固定间隙

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

我知道我可以使用如下所示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>

更新

增加了父项的宽度值，以更清楚地显示我要追求的内容 - 子项不应占用整个父项宽度(当然，除非有很多子项(。

Answer 1

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

取决于儿童宽度

#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>

取决于父宽度

#box {
display: grid;
grid-auto-flow: column;
grid-template-columns: auto;
grid-auto-rows: 100px;
column-gap: 10px;
outline: 1px solid blue;
width: 230px;
}
.item {
background: gray;
}

<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>

更新

温 父级的大小是 100% 宽度，孩子的数量是不确定的。

#box {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, 50px);
grid-auto-rows: 100px;
column-gap: 10px;
outline: 1px solid blue;
}
.item {
background: gray;
}

<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>

现在我们知道了，你的案子可以用grid解决，但我建议你使用flex。使用grid来完成这项任务就像用锤子敲打螺丝一样——我们可以达到目标，但使用了错误的工具。Grid对于具有异常卖出模式的表更有用，如果我们知道列数会更好。Flex对于元素列表更有用，就像在你的例子中一样。虽然Flex比Grid更旧、更原生，在所有现代浏览器中都工作得更稳定。