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

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;
}
}

我已经添加了一个2雷姆的空白，当大小小于600px时，在页面的中间，所以你的网站名称填充中间您可以在以下位置查看有关媒体查询的更多信息：https://learnjsx.com/category/1/posts/mediaQueries