CSS Grid布局水平导航栏处于错误单元格问题修复咨询

问题原因梳理 #

• 你将header和nav都包裹在#header-nav容器内，而Grid布局仅作用于#wrapper的直接子元素，只有直接子元素才能识别grid-area属性，你给嵌套在内层的h1、nav设置的Grid定位规则完全不生效。
• #wrapper的grid-template属性存在语法错误，缺少行高定义，和后续的grid-template-rows/grid-template-columns配置冲突。
• 导航相关样式存在属性冗余冲突，同时设置float和flex布局导致排列异常。

修复代码 #

修改后的HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>DS</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="ud.css" type="text/css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id="wrapper">
        <!-- 移除多余的#header-nav容器，让header和nav成为wrapper的直接子元素 -->
        <header>
            <h1>DS</h1>
        </header>
        <nav>
            <ul class="nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="assistivetec.html">AT</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="reservation.html">Reservation</a></li>
            </ul>
        </nav>
        <div id="photo">
        </div>
    </div>
</body>
</html>

修改后的CSS #

* {
    box-sizing: border-box;
}
.nav {
    margin: 0;
    padding: 0;
    list-style: none;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px; /* 导航项间距，可自行调整 */
}
h1 {
    overflow: hidden;
    line-height: 70px; /* 和行高一致，垂直居中 */
    margin: 0;
}
li {
    border-right:1px solid lightgray;
    border-left:1px solid lightgray;
    border-radius: 15px;
    font-family: "Google Sans",Roboto,Arial,sans-serif;
}
body {
    font-family: "Google Sans",Roboto,Arial,sans-serif;
    margin: 0;
    padding: 20px 0;
}
li a {
    color: black;
    display: block;
    padding: 8px 16px;
    background-color: white;
    text-decoration: none;
    border-radius: 25px;
}
#wrapper {
    display: grid;
    width: 90%;
    margin: auto;
    grid-template-columns: 100px 1fr 80px; /* 中间列自适应，适配不同屏幕尺寸 */
    grid-template-rows: 70px 1000px 1fr;
    grid-template-areas: 
        "title nav nav"
        "future future future"
        "footer footer footer";
    box-shadow: 3px 3px 3px darkblue;
}
header {
    grid-area: title; 
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}
nav {
    grid-area: nav;
    grid-row: 1 / 2;
    grid-column: 2 / 4; /* 按需求占2到4列，Grid列索引为左闭右开规则 */
}
#photo {
    grid-area: future;
    grid-row: 2 / 4;
    grid-column: 1 / 4;
}

效果说明 #

修复后导航栏会在第一行的第二到第四列展示，导航项水平排列，和左侧的header处于同一行相邻显示，符合预期设计效果。

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