使用网格布局:如何将box1放在行1列2，将box2放在行2列2？
使用网格布局:如何将box1放在行1列2，将box2放在行2列2？
提问于 2018-06-03 11:09:01
我得到的布局如下：
我期望的是：
将box1放入row 1 column 2，将box2放入row2 column 2。
为什么不能将box1和box2中的内容放到row 1 column 2的网格和row 2 column 2的网格中？
如何修复我的css？
html,
body {
height: 1200px;
width: 1000px;
}
.container {
display: grid;
grid-gap: 1.5em;
margin: 1.5em auto;
padding: 0 1.5em;
border: 1px solid green;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
}
.sidebar {
grid-row: 1/3;
grid-column: 2/3;
}
.box1 {
grid-row: 1/2;
grid-column: 2/3;
}
.box2 {
grid-row: 2/3;
grid-column: 2/3;
}<div class="container">
<div class="prose1">
<h1>Introduction</h1>
<p>100 characters created by lorem with emmt-vim.
</p>
</div>
<div class="sidebar">
<div class="box1">
<h2 class="box-header">Actions</h2>
<ul class="box-menu">
<li><a href="">Do a thing</a></li>
<li><a href="">Register your bad self</a></li>
<li><a href="">Hold the phone</a></li>
</ul>
</div>
<div class="box2">
<h2 class="box-header">Related Stuff</h2>
<ul class="box-menu">
<li><a href="">Just a link</a></li>
<li><a href="">Another link</a></li>
</ul>
</div>
</div>
<div class="prose2">
<h2>Additional Information</h2>
xxxx
</div>
</div>
回答 1
Stack Overflow用户
发布于 2018-06-04 19:16:45
容器是布局中的网格，您可以定位直接的子项，box1和box2嵌套在侧边栏中。因此，通常您可以从容器中定位porse1、sidebar和porse2，但您可以使用contents显示值将侧栏子项视为容器的直接子项。
因此，一种解决方案是使用contents显示值：
.sidebar {
display: contents;
}但要注意browser support。
另一种解决方案是使您的侧边栏也成为网格，并根据您的需要布局子项box1和box2，例如：
html,
body {
height: 1200px;
width: 1000px;
}
.container {
display: grid;
grid-gap: 1.5em;
margin: 1.5em auto;
padding: 0 1.5em;
border: 1px solid green;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
}
.sidebar {
display: grid;
grid-gap: 1.5em;
grid-row: 1/-1;
grid-column: 2;
}
.box1 {
grid-row: 1;
}
.box2 {
grid-row: 2;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50662957
复制相关文章
相似问题