<p>Пропиши нове значення для властивості <strong>grid-area</strong>:</p>

<div class="controls"> 
  <span>grid-row-start:</span>
  <select id="gridRowStart" class="grid-row">
  <option value="1">1</option>
  <option value="2" selected>2</option>
  <option value="3">3</option>
  <option value="4">4</option>  
  <option value="-1">-1</option>
</select>;<br>
  <span>grid-column-start:</span>
  <select id="gridColumnStart" class="grid-column">
  <option value="1">1</option>
  <option value="2" selected>2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="-1">-1</option>
</select>;<br>
  <span>grid-row-end:</span>
  <select id="gridRowEnd" class="grid-row">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3" selected>3</option>
  <option value="4">4</option>
  <option value="-1">-1</option>
  <option value="span 1">span 1</option>
  <option value="span 2">span 2</option>
  <option value="span 3">span 3</option>

</select>;<br>
  <span>grid-column-end:</span>
  <select id="gridColumnEnd" class="grid-column">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="-1">-1</option>
  <option value="span 1">span 1</option>
  <option value="span 2">span 2</option>
  <option value="span 3" selected>span 3</option>
  <option value="span 4">span 4</option>
  <option value="span 5">span 5</option>
</select>;
</div>

<div class="box">
  <div class="item" id="block"></div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

body {
  font-family: monospace;
  font-size: 18px;
  line-height: 1.45;
}

.controls {
  line-height: 2;
  margin-bottom: 36px;
  background-color: #f7f7f7;
  padding: 16px;
}

.controls span { 
  display: inline-block; 
  width: 50%;
  font-weight: 700; 
  color: #333; 
}

.controls select { 
  background-color: #555; 
  color: white;
  border: none; 
  font-size: 1em;
  padding: 2px;
}

.box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 1px;
  font-family: monospace;
}

.box .item {
  background-color: rgba(0, 0, 0, .45);
  color: #222;
  text-align: center;
  font-weight: 700;
  font-size: 1.25em;
  padding: 16px;
}

#block {
  grid-area: 2 / 2 / 3 / span 3;
  background-color: orange;
  line-height: 84px;
}

var controls = document.querySelector('.controls');
var allSelect = document.querySelectorAll('.controls select');
var block = document.querySelector('#block');

  controls.addEventListener('change', function(evt) {
  var val = "";
      for(var i = 0; i < allSelect.length; i++){
      val += allSelect[i].options[allSelect[i].selectedIndex].value;
      if(i < allSelect.length-1){val += " / ";}
      };
      
      block.style.gridArea = val;
}, false);