CODEWITHSUNDEEP
htmlcsscss-grid
john c. j.
john c. j.

Reputation: 1185

Display: grid - percents vs. fractions

I'm trying to understand how I should use display: grid.

Here is my example:

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>

At the first glance, it looks good. However, if you look more thoroughly, you can see some problems. The "content" is outside of "wrapper" and also the distance to the edges of screen is a bit different.

enter image description here

It could be fixed very simply:

/* Before: */
grid-template-columns: 30% 70%;

/* After: */
grid-template-columns: 30% 1fr;

But I am still wondering is it the only proper way or I can somehow use percents, without the problems as shown above? I already tried to use box-sizing: border-box but it does not solve the problem.

Note:

display: grid currently does not work out of the box in stable versions of browsers.

(See http://caniuse.com/#feat=css-grid)

It could be enabled with this quick instruction:

https://igalia.github.io/css-grid-layout/enable.html

Also, in Chrome Canary it works out of the box.

Upvotes: 3

Views: 115

Answers (1)

vals
vals

Reputation: 64174

The other way to get your result is to use fr units for both columns, in your case 3fr and 7fr (that will end up with 30% of the free space for the first, and so on)

I have added a shadow to show that now everything is where it should.

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>

Upvotes: 3

Related Questions