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

Question

看起来jQuery UI Ressizeable似乎不适用于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小提琴链接

$('#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>