<div id="container">
<div id="gridGaps" class="wrap-range">
  <p>
  <label>grid-rows-gap: <span>1</span>px;</label>
  <input type="range" name="gridRowGap" min="0" max="20" value="1"> 
  <p>
  <p>
  <label>grid-column-gap: <span>1</span>px;</label>
  <input type="range" name="gridColumnGap" min="0" max="20" value="1"> 
  <p>
  <p class="result" style="display:inline; white-space: nowrap;">grid-gap: <span id="spangridRowGap">1</span>px <span id="spangridColumnGap">1</span>px;</p>
</div>

  <div id="list">
    <div class="item"><p>1</p></div>   
    <div class="item"><p>2</p></div>
    <div class="item"><p>3</p></div>
    <div class="item"><p>4</p></div>
    <div class="item"><p>5</p></div>
    <div class="item"><p>6</p></div>   
    <div class="item"><p>7</p></div>
    <div class="item"><p>8</p></div>
    <div class="item"><p>9</p></div>
    <div class="item"><p>10</p></div>
    <div class="item"><p>11</p></div>   
    <div class="item"><p>12</p></div>
    <div class="item"><p>13</p></div>
    <div class="item"><p>14</p></div>
    <div class="item"><p>15</p></div>  
  </div>
</div>

#list {
  display: grid;
  grid-template-columns:repeat(5, minmax(auto,100px)); 
  grid-template-rows:repeat(3, 100px);
  grid-gap:1px;
  grid-auto-flow: column; 
  margin:1em 0;
}
.result{
  font-size: 20px;
  font-weight: 700;
   color: black;
}
.item {
  border-radius:5px;
  background-color: red;
  display:grid;
}

.item p {
  justify-self: center;
  align-self: center;
  color:white;
  font-size: 20px;
}

body {
  line-height: 2em;
  color:#777;
}
#container{
  width:500px;
  margin:1em auto;
}
.wrap-range input{
  width:60%; 
  float:right; 
  margin-top:.5em;
}
label{
  display:inline; 
  white-space: nowrap; 
  font-size: 20px; 
  color: black;
}

var ranges = document.querySelector("#gridGaps");
var grid = document.querySelector("#list");
var spanRowGap = document.querySelector("#gridRowGap");
var spanColumnGap = document.querySelector("#gridColumnGap");
ranges.addEventListener("input",function(evt){
  var val = evt.target.value; 
  var span = evt.target.parentElement.querySelector("span");
  
  span.innerHTML = val;console.log(val)
  var prop = evt.target.name;
  grid.style[prop] = val+"px";
  
  // grid-gap span
  var ggSpan = document.querySelector("#span"+prop);
  console.log(ggSpan)
  ggSpan.innerHTML = val;
}, false);