<h1>Testing CSS Grid and Fixed header and footer</h1>
<div class="wrapper">
  <div class="box head">heading</div>
  <div class="box head">heading</div>
  <div class="box head">heading with more text</div>
  <div class="box head">heading</div>
  <div class="box head">heading</div>
  <div class="box">What happens when this item has more text</div>
  <div class="box ">Test</div>
  <div class="box">Test</div>
  <div class="box">Test</div>
  <div class="box">Test</div>
  <div class="box">Test</div>
  <div class="box">What happens when this item has more text</div>
  <div class="box">Test</div>
  <div class="box">Test</div>
  <div class="box">Test</div>
  <div class="box">What happens when this item has more text</div>
  <div class="box">Test</div>
  <div class="box">Test</div>
  <div class="box">Test</div>
  <div class="box">Test</div>
  <div class="box">Test</div>
  <div class="box">What happens when this item has more text</div>
  <div class="box">Test</div>
  <div class="box">Test</div>
  <div class="box">Test</div>
  <div class="box">What happens when this item has more text</div>
  <div class="box">Test</div>
  <div class="box">Test</div>
  <div class="box">Test</div>
  <div class="box">Test</div>
  <div class="box">Test</div>
  <div class="box">What happens when this item has more text</div>
  <div class="box">Test</div>
  <div class="box">Test</div>
  <div class="box">Test</div>
  <div class="box">What happens when this item has more text</div>
  <div class="box">Test</div>
  <div class="box">Test</div>
  <div class="box">Test</div>
  <div class="box">Test</div>
  <div class="box foot">Footer</div>
  <div class="box foot">What happens when this item has more text</div>
  <div class="box foot">Footer</div>
  <div class="box foot">Test</div>
  <div class="box foot">Test</div>
</div>
<h2>Following Content</h2>
<p>some content to scroll etc.</p>
<p>some content to scroll etc.</p>
<p>some content to scroll etc.</p>
<p>some content to scroll etc.</p>
<p>some content to scroll etc.</p>
<p>some content to scroll etc.</p>
<p>some content to scroll etc.</p>
<p>some content to scroll etc.</p>
<p>some content to scroll etc.</p>
<p>some content to scroll etc.</p>
<p>some content to scroll etc.</p>
<p>some content to scroll etc.</p>
<p>some content to scroll etc.</p>
<p>some content to scroll etc.</p>
<p>some content to scroll etc.</p>
<p>some content to scroll etc.</p>
<p>some content to scroll etc.</p>

body {
	margin: 10px;
}
.wrapper {
	display: grid;
	grid-template-columns: auto auto auto auto auto;
	grid-gap: 10px;
	background-color: #fff;
	color: #444;
	height:300px;
	overflow:auto;
}
.box {
	background-color: #444;
	color: #fff;
	border-radius: 5px;
	padding: 20px 5px;
	font-size: 1rem;
}
.head, .foot {
	position:sticky;
	top:0;
	background:red;
  font-size:1.2rem
}
.foot {
	top:auto;
	bottom:0;
}