Question

我想设置div的格式，以使第一个元素跨越网格的整个长度，此后所有元素都位于其下方。但是，元素总数是可变的。

因此，我的方法是设置grid-column: 1 / -1;

不幸的是，这似乎不起作用。增大网格的大小后，-1似乎没有更新。示例：

<!DOCTYPE html>
<html>
    <head>
        <style>
            #gridify {
                display: grid;
                grid-template-rows: 20px 20px;
                grid-auto-flow: column;
            }
            p {
                margin: 0;
            }
            #gridify > *:first-child {
                font-weight: bold;
                text-align: center;
                grid-column: 1 / -1;
            }
        </style>
        <script>
            let curNum = 1;
            function addNum() {
                let p = document.createElement("p");
                p.innerText = curNum++;
                document.getElementById("gridify").appendChild(p);
            }
        </script>
    </head>
    <body>
        <div id="gridify">
            <p>Numbers</p>
        </div>
        <button onclick="addNum()">Add a number</button>
    </body>
</html>

JSFiddle

最初，标头的grid-column是1 / 2。但是，添加数字后，数字不会增加到1 / 3，1 / 4等。可以解决这个问题吗？

P.S。我想避免在HTML中添加额外的容器，以及在JS中进行DOM /样式操作。纯CSS解决方案将是理想的选择。

CSS网格列忽略元素自动添加

0 个答案: