jQuery UI Resizable 似乎不适用于 CSS 网格布局

Question

看起来 jQuery UI Resizable 似乎不适用于 CSS 网格布局。当元素开始调整大小时，它会跳到右边，添加 CSS 网格的偏移量。

$('#resize').resizable();

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
}

.grid_cell {
  background-color: white;
  border: 1px solid gray;
  text-align: center;
}

#resize {
  background-color: grey;
  position: absolute;
  width: 100%;
  text-align: center;
  grid-column-start: 2;
  grid-column-end: 3
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<div class="grid">
  <div class='grid_cell'>
    grid cell
  </div>
  <div class="grid_cell">
    grid cell
  </div>
  <div id="resize">
    resize me!
  </div>
</div>

JSFiddle

https://jsfiddle.net/Bensky/91bgbfxg/11/

知道怎么解决吗？

Answer 1

希望以下解决方案有所帮助:

JS fiddle link

$('#resize').resizable();

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
}
.grid_cell {
  background-color: white;
  border: 1px solid gray;
  text-align: center;
}

#resize {
  background-color: grey;
  position: absolute;
  width: 100%;
  text-align: center;
  grid-column-start:1;
  grid-column-end: 3
}

<div class="grid">
  <div class='grid_cell'>
    grid cell
  </div>
  <div class="grid_cell">
    grid cell
  </div>
  <div id="resize">
    resize me!
  </div>
</div>