我试图了解我应该如何使用display: grid.
这是我的例子：
https://jsfiddle.net/Lycuuu95/
<style>
body {
padding: 2em;
}
.wrapper {
display: grid;
grid-template-columns: 30% 70%;
grid-gap: 10px;
}
.sidebar {
grid-column: 1;
padding: 10px;
background-color: rgb(191,217,155);
}
.content {
grid-column: 2;
padding: 10px;
background-color: rgb(230,230,220);
}
</style>
<h1>Lorem Ipsum</h1>
<div class="wrapper">
<aside class="sidebar"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></aside>
<article class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></article>
</div>
乍一看，它看起来不错。但是，如果您仔细观察，您会发现一些问题。“内容”在“包装”之外，到屏幕边缘的距离也有点不同。
它可以非常简单地修复：
/* Before: */
grid-template-columns: 30% 70%;
/* After: */
grid-template-columns: 30% 1fr;
但我仍然想知道这是唯一正确的方法还是我可以以某种方式使用百分比，而不会出现上述问题？我已经尝试过使用box-sizing: border-box，但它并没有解决问题。
笔记：
display: grid目前在稳定版本的浏览器中不能开箱即用。
（见http://caniuse.com/#feat=css-grid）
可以使用以下快速指令启用它：
https://igalia.github.io/css-grid-layout/enable.html
此外，在 Chrome Canary 中，它开箱即用。