html - 表示: グリッド - パーセント対分数

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>

一見、良さそうです。しかし、よくよく見てみると、いくつかの問題点が見えてきます。「コンテンツ」は「ラッパー」の外側にあり、画面の端までの距離も少し異なります。

非常に簡単に修正できます。

/* 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 ではそのまま使用できます。