如何在 CSS Grid 中设置行数为 auto-fill 并使高度生效?

Question

https://code.juejin.cn/pen/7316068943830581274
👆 截图出自这里

● 请问在使用 grid 布局时，如何设为行数为 auto-fill 为什么指定的高不生效？
● 如图，第一行已经按设定显示了高度，其它几行高度不听令
● 是不是只有在子元素 span 上设 min-height: px 才是唯一的办法
谢谢

<article >
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</article>


article {
    margin: 20px;
    counter-reset: counter01;
    padding: 20px;
    background: #eee;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 👇 指定固定行数时，设定的高度有效 */
    /* grid-template-rows: repeat(5, 150px); */
    /* 👇 在不指定固定行数时，设定的高度无效 */
    grid-template-rows: repeat(auto-fill, min(150px, 150px));
    gap: 5px;
}

article span{
    padding: 1em;
    text-align: center;
    counter-increment: counter01;
    min-width: 50px;
    /* height: 50px; */
    border: solid 1px blue;
    &::after{
        content: counter(counter01);
    }
}

能使行数为 auto-fill 时也让高度听指挥吗？
谢谢

Answer 1

article得有一个明确的高度（例如: height: 300px）你才可以fill啊

如果你不想指定行数，行数由元素的个数自行决定，而又想控制每行的行高为150px。那就设置隐式行高就可以了
grid-auto-rows: 150px

备注：上面代码链接访问不了