扩展项目以填充隐藏项目的响应式网格

Question

我正在尝试在我的网站顶部制作一个导航栏：

在桌面屏幕上，它应该如下所示：

+--------+------------------------------+
|        | WEBSITE NAME                 |
|  LOGO  +------------------------------+
|        |     LINK_1 LINK_2 LINK_3 ... |
+--------+------------------------------+

在较窄的移动屏幕上， 我隐藏导航链接 使用 CSS 媒体查询。

结果如下：

+------+--------------+
|      | WEBSITE NAME |
| LOGO +--------------+
|      |              |
+------+--------------+

但是，我想要网站名称 填充网格单元格 使用的隐藏导航链接：

+------+--------------+
|      |              |
| LOGO | WEBSITE NAME |
|      |              |
+------+--------------+

我该怎么做？

这是我的代码的 MWE：

#header {
    display: grid;
    grid-template-columns: 75px auto;
    grid-template-rows: auto auto;
    align-items: center;
}
#header-logo {
    grid-column: 1 / span 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;
    }
}

<header id="header">
    <div id="header-logo">
        <a href="/">
            <img src="/img/logo.png">
        </a>
    </div>
    <div id="header-sitename">
        <a href="/">WEBSITE NAME</a>
    </div>
    <ul id="header-nav">
        <li>
            <a>LINK_1<a>
        </li>
        <li>
            <a>LINK_2>a>
        </li>
        <li>
            <a>LINK_3><a>
        </li>
        <!--- More links -->
    </ul>
</header>

Answer 1

我发现您的 HTML 缩进不好，例如 img 的一些结束标记， 你可以为你的媒体查询指定header-sitename的行为

@media (max-width: 600px) {
  #header-nav {
      display: none;
  }
  #header-sitename {
    margin: 2rem;
  }
}

当尺寸小于 600 像素时，我在页面中间添加了 2 rem 的边距，以便您的网站名称填充中间 您可以查看更多关于媒体查询的信息：https://learnjsx.com/category/1/posts/mediaQueries