написал jsbin здесь https://jsbin.com/famuyodeye/2/edit?html,output
<style>
.grid-container {
display: grid;
grid:100%/1fr 1fr;
grid-gap: 10px;
margin: 10px;
}
.grid-item {
overflow: hidden;
width: 100%;
}
img{
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<div class="grid-container" style="height:400px;">
<div class="grid-item">
<img src="./a.jpg">
</div>
<div class="grid-item">
<img src="./b.jpg">
</div>
</div>
предположим, что я поместил простую сетку из 2 столбцов и поместил в нее 2 изображения
я хочу добавить интерактивную мышь, когда мышьнад областью разрыва отображается кнопка делителя, и позже я могу добавить функцию перетаскивания для изменения ширины сетки.
Возможно, я смогу добиться этого с помощью большого количества JS, но есть ли разумный способ,я имею в виду лучше использовать меньше JS, только с CSS, чтобы это произошло?