带有内容的 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高度和宽度，它是响应式的。