.
,如果是一个Id,则忘记了在其前面加一个#
。grid-template-areas
中,您知道每个元素的出现都填充了一个矩形,您可以随意调整它,唯一的规则是整个元素布局也应该是一个矩形,不可以像“L”形状那样。fr
进行空间分配,以改变侧边栏所占的比例。
.sidebar{
grid-area:sidebar;
background:aqua;
}
.grid_container{
display:grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 1fr 3fr;
grid-template-areas:
"sidebar ."
"sidebar .";
background:pink;
height:300px;
}
<div class="grid_container">
<div class="sidebar">side bar here</div>
other content here
</div>
.sid(newline)ebar
,类名是.sidebar
只有一个单词。我认为这只是开发工具将其放到新行中。不过你说得对,如果我也提供了CSS,这种情况就可以避免了。如果你说它在Chrome中可以工作,我会尝试你的答案(与我的进行比较),也许我确实犯了错误。感谢你的帮助。 - jdmdevdotnet
grid-area
的属性使用呢? - user10089632grid-area
中使用自定义缩进:https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-area - Jamie McElwain