Дисплей: сетка - проценты против фракций

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>