我得到的布局如下:
我期望的是:
放入和box1
放入.row 1
column 2
box2
row2
column 2
为什么不能将内容放入 grid ofbox1
和grid of ? 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>