响应式Grid布局导航栏如何让站点名填充隐藏导航的网格单元格

实现方案 #

你只需要修改两处CSS规则即可：

1. 先修正原有#header-logo语法错误的网格属性声明
2. 在移动端媒体查询中新增站点名称的行跨度配置，让它占满右侧2行高度

修改后的完整CSS如下：

#header {
    display: grid;
    grid-template-columns: 75px auto;
    grid-template-rows: auto auto;
    align-items: center;
}
#header-logo {
    /* 修正原来的错误写法，拆分网格列和行的声明 */
    grid-column: 1 / span 1;
    grid-row: 1 / span 2;
}
#header-sitename {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
}
#header-nav {
    display: flex;
    flex-wrap: wrap;
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
    justify-content: right;
}
@media (max-width: 600px) {
    #header-nav {
        display: none;
    }
    /* 新增规则：移动端站点名称占满右侧2行 */
    #header-sitename {
        grid-row: 1 / span 2;
    }
}

补充说明 #

你贴的HTML代码里存在a标签闭合的笔误，比如<a>LINK_1<a>需要改为<a>LINK_1</a>，建议修正避免页面渲染异常。

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