努力将2个Div与网格模板放在同一条线上

Question

基本上我正在尝试重新创建这个图像：

https://i.stack.imgur.com/zLl9T.jpg

但在LightBlue和Red部分，他们在同一条线上苦苦挣扎：

.sidebar {
background-color: lightblue;
width:20%;
min-height:100px; 
}
.content {
background-color: red;
width:80%;
min-height:100px;
}

到目前为止，我已经尝试了Flex、内联块和更改宽度，但似乎无法从不出现在彼此下得到它们

我的集装箱里有：

.container {
display:grid;
grid-template-areas: 
"navbar navbar navbar navbar"        
"sidebar content"
"footer footer footer footer"
}

Answer 1

请参阅下文。对所有相关类使用grid-area，对sidebar和content删除width。

.navbar {
grid-area: navbar;
background-color: lightgreen;
}
.sidebar {
background-color: lightblue;
min-height: 100px;
grid-area: sidebar;
}
.content {
background-color: red;
min-height: 100px;
grid-area: content;
}
.footer {
grid-area: footer;
background-color: lightgreen;
}
.container {
display: grid;
grid-template-areas: "navbar navbar navbar navbar" "sidebar content content content" "footer footer footer footer"
}

<div class="container">
<div class="navbar">navbar</div>
<div class="sidebar">sidebar</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>