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

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版它开箱的。

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>