显示：网格 - 百分比和。分数

Question

我正在尝试了解我应该如何使用 display: grid。

这是我的例子：

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

乍一看，还不错。但是，如果仔细观察，就会发现一些问题。 "content" 在 "wrapper" 之外，而且到屏幕边缘的距离也有点不同。

它可以非常简单地修复：

/* 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（最终将得到第一个免费 space 的 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>

显示：网格 - 百分比和。分数

Display: grid - percents vs. fractions

html

css

css-grid