Grid element not expanding to 100% width

Question

So i'm new to grid. Used it for a few project now but still not good with working out the kinks. I'm having a problem where I've set the grid element to 100% but it is getting clipped at 80%.

This seems like it could be a simple fix but I've been tinkering around with this for the last hour and can't seem to find what's causing it.

note: I am the using a slider element from fomantic, but it doesn't appear in the code preview as the viewpoint is too small.

body{
  margin:0;
}
.page-wrapper{
  width:100%;
  height:100%;
  
  display:grid; 
  grid-template-columns:10% 40% 20% 10% 5%;
  grid-template-rows:4vh auto 2vh auto 6vh;
  grid-template-areas:". . . . ."
                      ". page_heading page_heading page_heading ."
                      ". . . . ."
                      ". svg-container . user_controls ."
                      ". . . . .";
  
}

.page_heading-wrapper{
  grid-area:page_heading;
  width:100%;
}

.svg-container{
  grid-area:svg-container;
}

.user_controls{
  grid-area:user_controls;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.7.8/components/slider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.7.8/components/slider.min.js"></script>
<div class="page-wrapper">
  <div class="page_heading-wrapper"></div>
  <div class="svg-container">
      <svg class="user_svg_elem" height="210" width="400">
          <path d="M150 0 L75 200 L225 200 Z" data-path_to_mask />
          <path d="M150 0 L74 200 L225 200 Z" data-path_to_mask />
      </svg> 
  </div>
  <div class="user_controls ui slider"></div>
</div>

it's getting clipped to 70% which is the area you have defined for that element. Using 100% will refer to that area — Temani Afif, Dec 25 '19 at 18:15

Rahul · Accepted Answer · 2019-12-25T18:28:48.980

You aren't create 100% Grid column. grid-template-columns:10% 40% 20% 10% 5%; = 85%. Make it 100%. Change grid-template-columns:10% 40% 20% 10% 5%; to grid-template-columns: 20% 40% 20% 10% 10%;. Now it's 100% width. Example is here.

Also add box-sizing CSS.

*,
*:after,
*:before{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

The box-sizing CSS property sets how the total width and height of an element is calculated. Details in MDN.

score 1 · Answer 2 · answered Dec 25 '19 at 18:20

10% + 40% + 20% + 10% + 5% = 85%

May be the problem is here.

The grids do not work like the tables which adjust the percentages to always have 100% in total.

Instead of percentages, you can use the unit fr :

grid-template-columns:1fr 4fr 2fr 1fr 0.5fr;

Grid element not expanding to 100% width

2 Answers2