表示：グリッド - パーセントと端数

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

。

Answer 1

あなたの結果を得るために他の方法は、あなたのケースの3FRと7FRに、両方の列のためのFRユニットを使用することです（それはように最初の空きスペースの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>