現在のCSSグリッドレイアウトでコーナーアイテムを取得し、ホバーで展開します

私は正直にそれを使用してそれを解決しようとしました grid-template-columns: repeat(auto-fit, minmax(250px,auto)); 子要素のサイズは異なりますが、不安定すぎてそのように機能しません。しかし、私は思いません grid このタスクには必須です。これを解決する方法を理解する最も簡単な方法-古き良きJavaScript（+ jQuery）と flex 。正しい方法は、ホバーされた要素の最も近い兄弟だけでなく、単一の行のすべての要素のサイズを変更することです。任意の画面サイズでお試しください。

$(document).ready(function() {
  /* defines main digits */
  let boxWidth = $('#box').innerWidth();
  let itemOuterWidth = $('.item').outerWidth(true);
  let itemInnerWidth = $('.item').innerWidth();
  SetSeparators(boxWidth, itemOuterWidth);
  /* refresh main digits ater page resize */
  $(window).resize(function() {
    $('.item').css({
      "flex": ""
    });
    boxWidth = $('#box').innerWidth();
    itemOuterWidth = $('.item').outerWidth(true);
    itemInnerWidth = $('.item').innerWidth();
    SetSeparators(boxWidth, itemOuterWidth);
  });
  $('#box').on('mouseover', '.item', function(e) {
    GetElementsPosition($(this).index('.item'), $(this), boxWidth, itemOuterWidth, itemInnerWidth);
  });
  $('#box').on('mouseleave', '.item', function(e) {
    $('.item').css({
      "flex": ""
    });
  });
});
/* set separator elemet to avoid blocks to jump from row to row while resizing */
function SetSeparators(boxWidth, itemOuterWidth) {
  $('.separator').remove();
  let countRowItems = Math.floor(boxWidth / itemOuterWidth);
  $('<div class="separator"></div>').insertBefore('.item:nth-child(' + countRowItems + 'n+1)');
}
function GetElementsPosition(index, element, boxWidth, itemOuterWidth, itemInnerWidth) {
  /* calculating row items, column position and row position of a current elemet */
  let countRowItems = Math.floor(boxWidth / itemOuterWidth);
  let colPosition = index % countRowItems;
  let rowPosition = Math.floor(index / countRowItems);
  /* exmanpd size of a hovered element in pixels*/
  let expandSize = 50;
  /* counting number of items in a hovered row */
  let currentRowCounter = 0;
  $('.item').each(function(e) {
    let thisIndex = $(this).index('.item');
    let thisRowPosition = Math.floor(thisIndex / countRowItems);
    if (rowPosition == thisRowPosition) {
      currentRowCounter++;
    }
  });
  /* settting each element widht according to it's position in a list and row */
  $('.item').each(function(e) {
    $(this).css({
      "flex": "0 1 " + itemInnerWidth + "px"
    });
    let thisIndex = $(this).index('.item');
    let thisColPosition = thisIndex % countRowItems;
    let thisRowPosition = Math.floor(thisIndex / countRowItems);
    if ((rowPosition == thisRowPosition) && (colPosition == thisColPosition)) {
      $(this).css({
        "flex": "0 1 " + (itemInnerWidth + expandSize) + "px"
      });
    } else if (rowPosition == thisRowPosition) {
      $(this).css({
        "flex": "0 1 " + (itemInnerWidth - (expandSize / (currentRowCounter - 1))) + "px"
      });
    } else {
      $(this).css({
        "flex": ""
      });
    }
  });
}

* {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}
#box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.item {
  background: gray;
  flex: 0 1 250px;
  height: 50px;
  transition: all .5s ease;
  margin: 0 15px 15px 15px;
}
.separator {
  flex: 0 1 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='box'>
  <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 class='item'></div>
  <div class='item'></div>
</div>