3

我试图了解我应该如何使用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 中，它开箱即用。

4

1 回答 1

3

获得结果的另一种方法是对两列都使用 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>

于 2017-01-18T17:45:25.160 回答