CSS Grid Problem

for responsive percentage widths are used, but scrollbar takes width , but not always visible :-(

by Ben Clayton

HTML

<div class="header">
<div class="innerheader">
  <div class="hcol">
    Col1
  </div>
  <div class="hcol">
    Col2
  </div>
  <div class="hcol">
    Col3
  </div>
  <div class="hcol last">
    Col4
  </div>
	</div>

</div>

<div class="gridbody">
  <div class="row">
    <div class="col">
      123
    </div>
    <div class="col">
      123
    </div>
    <div class="col">
      123
    </div>
    <div class="col">
      123
    </div>
  </div>
   <div class="row">
    <div class="col">
      123
    </div>
    <div class="col">
      123
    </div>
    <div class="col">
      123
    </div>
    <div class="col">
      123
    </div>
  </div>
   <div class="row">
    <div class="col">
      123
    </div>
    <div class="col">
      123
    </div>
    <div class="col">
      123
    </div>
    <div class="col">
      123
    </div>
  </div>
   <div class="row">
    <div class="col">
      123
    </div>
    <div class="col">
      123
    </div>
    <div class="col">
      123
    </div>
    <div class="col">
      123
    </div>
  </div>
  <div class="row extra">
    <div class="col">
      123
    </div>
    <div class="col">
      123
    </div>
    <div class="col">
      123
    </div>
    <div class="col">
      123
    </div>
  </div>
  <div class="row extra">
    <div class="col">
      123
    </div>
    <div class="col">
      123
    </div>
    <div class="col">
      123
    </div>
    <div class="col">
      123
    </div>
  </div>
</div>

<div class='content'>
jQuery detection of scrollbars:   https://codepen.io/dukecroc/pen/NqrKQv

</div>

<button class="btn content">
Toggle Scrollbar
</button>

CSS

body {
  font-size: 0;/* stop white space having width */
}


.hcol,
.col {
  display: inline-block;
  width: calc(25% - 6px);
  border: 1px solid #EEEEEE;
  font-size: 16px;
	padding: 2px;
  
}
.innerheader{
	margin-right: 14px;/* allow for width of scrollbar */
}


.gridbody {
  height: 120px;
  overflow: auto;
}
.content {
	margin-top: 30px;
	font-size:12px;
}

JavaScript

$(document).ready(function(){
	$('.btn').click(function(){
		$('.extra').toggle()
	});

})