Dynamically resize columns in css grid layout with mouse

Question

I am trying to dynamically resize css grid layout boxes by dragging the column dividers (or resize placeholders) with the mouse.

I set resize: horizontal; on the nav element to resize, and it gets resized when I drag the small resize handle in the lower right corner of the element, but the width of the neighbouring column is not automatically adjusted which leads to overlap. Here is a broken 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;
}

I expected the css grid engine to automatically handle this case but apparently it does not.

I experimented with jquery-ui resizable but it does not seem to work well with css grids.

I am looking into how to do it with jquery by setting the grid attribute grid-template-columns/rows: to a dynamic value but it is not clear how to catch the events thrown by resizing the element via the resize handle. The jquery resize event is only triggered on the window object, and not on dom elements.

What might be a way to do it without having to handle low-level mouse events like dragstart/dragend?

Answer 1

What you are looking to achieve is possible using only css. I've modified your example. The main takeaways are this:

1. Most importantly, try not to insert raw content in your semantic layout tags. Use header, paragraph, and list tags rather than text and br tags. This makes your code both easier to read and easier to reason about. Many of your problems happened because of how reflow is handled in grid areas.
2. Use grid-template to simplify your layout as it will make breakpoint reflow easier later on.
3. Use overflow: auto; along with specifying resize: vertical/horizontal. Without setting overflow, resize will fail.
4. Use min/max width/height values to create boundaries for resizing.

body {
    margin: 10px;
    height: 100%;
}

main {
    display: grid;
    border: 3px dotted red;
    padding: 3px;
    grid-gap: 3px;
    
    grid-template: 
    "nav head" min-content
    "nav main" 1fr
        / min-content 1fr;
}

nav {
    grid-area: nav;
    border: 3px dotted blue;
    overflow: auto;
    resize: horizontal;
    
    min-width: 120px;
    max-width: 50vw;
}

header {
    grid-area: head;
    border: 3px dotted orange;
    overflow: auto;
    resize: vertical;
    
    min-height: min-content;
    max-height: 200px;
}

section {
    grid-area: main;
    border: 3px dotted gray;
}

<main>
  <nav>
    <ul>
      <li>Nav Item</li>
      <li>Nav Item</li>
      <li>Nav Item</li>
      <li>Nav Item</li>
      <li>Nav Item</li>
      <li>Nav Item</li>
    </ul>
  </nav>

  <header>
    <h1>Header Title</h1>
    <small>Header Subtitle</small>
  </header>

  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>
</main>