显示：网格 - 百分比与分数

Question

我试图了解如何使用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>

乍一看，它看起来不错。但是，如果你看得更彻底，你可以看到一些问题。 ＆＃34;内容＆＃34;在＆＃34;包装＆＃34;之外而且到屏幕边缘的距离也有点不同。

可以非常简单地修复：

/* 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中，它可以开箱即用。

Answer 1

获得结果的另一种方法是在两个列中使用fr单位，在你的情况下为3fr和7fr（最终将为第一列提供30％的可用空间，依此类推）

我添加了一个阴影，表明现在一切都应该到了。

body {
  padding: 2em;
}
.wrapper {
  display: grid;
  grid-template-columns: 3fr 7fr;  /* fix: 30% 1fr; */
  grid-gap: 10px;
  box-shadow: 0px 0px 2px 2px red;
}
.sidebar {
  grid-column: 1;
  padding: 10px;
  background-color: rgb(191, 217, 155);
}
.content {
  grid-column: 2;
  padding: 10px;
  background-color: rgb(230, 230, 220);
}

<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>