display:grid无法配置四列？按教程操作仍未解决求助

• 核心错误：grid-template-columns是网格容器专属属性，你错误地把它写在了子元素footer div上，而非设置了display: grid的footer容器本身。
• 网格布局的基础规则：容器负责定义网格的列/行结构，子元素自动作为网格项填充到网格中，不需要给子元素加网格结构属性。

修正后的代码 #

CSS部分 #

footer {
    background-color: #000861;
    color: #fff;
    padding: 20px 10px;
    display: grid;
    grid-gap: 10px;
    /* 将列定义移到容器上，repeat(4, auto)等价于四个auto写法，更简洁 */
    grid-template-columns: repeat(4, auto);
}

footer div{
    border: solid 2px #fff;
    /* 移除子元素上无效的grid-template-columns */
}

HTML部分（无需修改） #

<footer>
    <div>Text</div>
    <div>Text</div>
    <div>Text</div>
    <div>Text</div>
    <div>Text</div>
    <div>Text</div>
</footer>

效果说明 #

修正后，footer作为网格容器会自动将内部div排列为4列，超出4个的元素会自动换行到下一行，同时保留你设置的间距、边框等样式。

内容的提问来源于stack exchange，提问作者Hunktydunkaty