带有内容的 CSS 网格标题和带有最大宽度和中心的侧边栏

Question

我在尝试完成这项工作时遇到了麻烦，我现在想要实现响应式布局，我需要在调整浏览器大小时内容变小，但需要侧边栏固定为 300px 并且网站位于中心最大宽度为 960px迄今为止.container{display: grid;grid-gap: 20px;grid-template-areas: "header  header""sidebar content";grid-template-columns: 1fr 3fr;}#header {grid-area: header;height: 96px;}#mainbar{grid-area: content;margin: 0;padding: 0;margin-right: 20px; }#sidebar{grid-area: sidebar;margin: 0;margin: 0 0 15px 0}从未抽出时间将侧边栏设置为固定的 300px 宽度，而只是试图让它在任何宽度下工作 <div class="container"> <div id="header"></div> <div id="mainbar"></div> <div id="sidebar"></div> </div>

Answer 1

您缺少末尾的引文container。您还缺少一个分号sidebar's margin。侧边栏也不会显示，因为它没有高度或宽度。

查看这个 codepen 示例。我修正了拼写错误并给出了Sidebar高度和宽度，它是响应式的。