CSS grid-column失效问题：导航栏无法占满网格全列

问题描述 #

我将container类设置为3列网格布局，希望导航栏能占满整个网格宽度，于是给.navigationbar ul添加了grid-column: 1 / -1属性，但该属性未生效，导航栏仅显示在页面角落。

效果截图：

原始代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./Styles.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="navigationbar">
            <nav>
                <ul>
                    <li>Home</li>
                    <li>About us</li>
                    <li>Items</li>
                    <li>agents</li>
                    <li>contact</li>
                </ul>
            </nav>
        </div>

        <div class="content">

        </div>
    </div>    
</body>
</html>

CSS代码 #

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container{
    display: grid;
    grid-template-columns: repeat(3 , 1fr);
    grid-template-rows: auto auto auto;
}

.navigationbar ul{
 grid-column: 1 / -1;
 display: flex;
 justify-content: space-evenly;
}

问题原因 #

grid-column是网格布局专属属性，仅对网格容器的直接子元素（即网格项）生效。你的网格容器是.container，它的直接子元素是.navigationbar和.content，而.navigationbar ul是.navigationbar的子元素，不属于网格项范畴，因此给它添加grid-column不会产生预期效果。

修正方案 #

将grid-column: 1 / -1应用到网格项.navigationbar上，让它占满整个网格宽度，同时保留ul的flex布局实现导航项的均匀分布。

修正后的CSS代码 #

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container{
    display: grid;
    grid-template-columns: repeat(3 , 1fr);
    grid-template-rows: auto auto auto;
}

/* 给网格项.navigationbar添加跨列属性 */
.navigationbar{
    grid-column: 1 / -1;
}

.navigationbar ul{
    display: flex;
    justify-content: space-evenly;
}

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