<div class="control">
  <input type="checkbox" id="switch" checked/>
  <label for="switch" class="switch">
    <span class="eye"></span>
  </label>

  <input type="range" min="0" max="100" step="1" value="0">
</div>
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>        
</div>

.control {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 37.5rem;
  margin: 2rem auto 0;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-auto-rows: 100px;
  justify-content: space-between;
  row-gap: 0%;
  width: 100%;
  max-width: 37.5rem;
  padding: 0.5rem;
  margin: 0 auto;
  box-sizing: border-box;
  border: 2px dashed #fdeae3;
  border-radius: 15px;
}

body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(-45deg, #ff9f4d 10%, #ffc857 0, #ffc857 90%, #ff9f4d 0, #ff9f4d 100%);
}

input[type="range"] {
  display: block;
  margin-right: 2em;
}

.item {
  border-radius: 15px;
  background-color: #faf7fa;
  background-image: linear-gradient(#ff5e49,#ff5e49), linear-gradient(#4d004c,#4d004c);
  background-size: 50px 10px, 60px 10px;
  background-position: 20px 40px, 20px 60px;
  background-repeat: no-repeat;
}

#switch {
  position: absolute;
  left: -9999px;
}

.switch {      
  display : block;
  position: relative;
  width   : 7.5em;
  flex-shrink: 0;
  padding : 3px;
  cursor  : pointer;
  border-radius : 33px;
  background    : #ff5d47;
  box-shadow    :  0 1px 1px 0 rgba(0,0,0,.3);
  transform: scale(0.7);
}

.switch:before , .switch:after {
  display : block;
  color   : #fff;
  position : absolute;
  font-size : 30px;
  top : 15px;
  z-index : 0;
  font-family: monospace;
}

.switch:before {
  left : 15px;
  content : '%';
}

.switch:after {
  right : 15px;
  content : 'PX';
}

.eye {
  display : block;
  width   : 39px;
  height  : 41px;
  border  : 7px solid #4d004b;
  border-radius : 50%;
  position      : relative;      
  left : 0;
  z-index: 1;
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) transform;
  transform: translateX(1px);
}

.eye:after , .eye:before { 
  display : block;
  content : '';
  position: absolute;
  z-index : 999;
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;		
}

.eye:before {
  width  : 100%;
  height : 34px;
  top  : 0; 
  left : 0;
  background-color: #fff;
  border-radius : inherit;
  border-top    : 4px solid #ff5d47;
  border-bottom : 3px solid #ff5d47;
}

.eye:after {
  width  : 3px;
  height : 3px;		  
  top : 0;
  left : 0;
  bottom : 0;
  right : 0;
  margin : auto;
  background-color: #000;
  box-shadow : -2px -2px 0 0px #fff , 0 0 1px 3px #4e341c ;
  border-radius : 50%;
}

#switch:checked + .switch .eye {      
  transform: translateX(67px);
}

#switch:checked + .switch .eye:before {
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
  border-top-width : 20px;
  height : 19px;
}

#switch:checked + .switch .eye:after{
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
  top : 10px;
  left : -20px;
}


@supports not (gap: 1px) {
  body {
    padding-top: 2em;  
  }
  
  body::before {    
    content: "Your browser doesn't support gap property";
    display: block;
    color: #e43;
    font-weight: bold;
    position: fixed;
    top: 1.5em;
    left: 0;
    right: 0;
    z-index: 1;
    text-align: center;
  }
}

var container = document.querySelector('.container'),
    slider = document.querySelector('input[type="range"]');
checkbox = document.querySelector('input[type="checkbox"]');

slider.addEventListener('input', function () {



  if(checkbox.checked) {
    container.style.rowGap = this.value + '%';
  }

  else {
    container.style.rowGap = this.value + 'px';
  }
}, false);