Redimensionner dynamiquement les colonnes dans la grille css de mise en page avec la souris

Je suis en train de redimensionner dynamiquement grille css de mise en page des cases en faisant glisser les séparateurs de colonne (ou redimensionner les espaces réservés) avec la souris.

J'ai mis resize: horizontal; sur le nav élément de redimensionner, et il est redimensionnée lorsque je fais glisser la petite poignée de redimensionnement dans le coin en bas à droite de l'élément, mais la largeur de la voisine de la colonne n'est pas réglé automatiquement ce qui conduit à des chevauchements. Voici une fracture de la codepen.

HTML:

<main>
 <nav>#1</nav>
 <header>#2</header>
 <section>#3</section>
</main>

CSS:

main {
    display: grid;
    border: 3px dotted red;
    grid-gap: 3px;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 100px 1fr;
    height: 100%;
}

nav {
    grid-column: 1;
    grid-row: 1;
    grid-row: 1 / span 2;
    resize: horizontal;
    overflow: scroll;
    border: 3px dotted blue;
}

Je m'attendais à la grille css moteur pour gérer automatiquement ce cas, mais apparemment il ne fonctionne pas.

J'ai expérimenté avec jquery-ui resizable mais il ne semble pas bien fonctionner avec css grilles.

Je suis à la recherche dans la façon de le faire avec jquery par réglage de la grille de l'attribut grid-template-columns/rows: à une valeur dynamique, mais il n'est pas clair comment intercepter les événements lancés par le redimensionnement de l'élément via la poignée de redimensionnement. Le jquery redimensionner événement est déclenché uniquement sur le window objet, et non pas sur des éléments du dom.

Ce qui pourrait être un moyen de le faire sans avoir à gérer de bas niveau les événements de la souris comme dragstart/dragend?

Grande question. Je pense re-extensible grille zones seront une chose importante une fois que cette technologie vraiment se propage. Pourquoi la deuxième colonne n'est pas re-taille lorsque vous faites glisser la première colonne, je pense que c'est parce que cette action ne soit pas redistribué le document. Voici une explication plus complète: stackoverflow.com/q/37406353/3597276
merci! je vais essayer de voir si il peut être adapté à une grille css de mise en page; sinon pourriez avoir à passer à l'aide de flotteurs.

OriginalL'auteur ccpizza | 2017-09-04