jQuery UI Resizable seems not to work with CSS Grid Layout

Question

It looks like that jQuery UI Resizable seems not to work with CSS Grid Layout. When resizing of an element starts, it jumps to the right adding the offset of the CSS grid.

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

Any idea how to solve it?

Answer 1

Hope below solution helps:

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>