Making a dragbar to resize divs inside CSS grids

Question

I have 2 boxes and a vertical div line in one unique container div (code and fiddle below).

I'm using CSS grids to position my elements inside the container

What I'd like to accomplish is to use the vertical line to resize horizontally the two boxes based on the position of the vertical line.

I apologize if the question is noobish, I am new to web development, only used Python before, already tried to google and stackoverflow search but all solutions seem overly complicated and generally require additional libraries, I was looking for something simpler and JS only.

HTML:

<div class="wrapper">
  <div class="box a">A</div>
  <div class="handler"></div>
  <div class="box b">B</div>
</div>

CSS:

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-template-columns: 200px 8px 200px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  resize: both;
}

.handler{
    width: 3px;
    height: 100%;
    padding: 0px 0;
    top: 0;
    background: red;
    draggable: true;
}

https://jsfiddle.net/gv8Lwckh/6/

Solution 1

What you intend to do can be done using CSS flexbox—there is no need to use CSS grid. The bad news is that HTML + CSS is not so smart that declaring resize and draggable will make the layout flexible and adjustable by user interaction. For that, you will have to use JS. The good news is that this is actually not too complicated.

Here is a quick screen grab of output the code below:

However, for you to understand the code I will post below, you will have to familiarize yourself with:

• Event binding using .addEventListener. In this case, we will use a combination of mousedown, mouseup and mousemove to determine whether the user is in the middle of dragging the element
• CSS flexbox layout

---

Description of the solution

Initial layout using CSS

Firstly, you will want to layout your boxes using CSS flexbox. We simply declare display: flex on the parent, and then use flex: 1 1 auto (which translates to "let the element grow, let the element shrink, and have equal widths). This layout is only valid at the initial rendering of the page:

.wrapper {
  /* Use flexbox */
  display: flex;
}

.box {
  /* Use box-sizing so that element's outerwidth will match width property */
  box-sizing: border-box;

  /* Allow box to grow and shrink, and ensure they are all equally sized */
  flex: 1 1 auto;
}

Listen to drag interaction

You want to listen to mouse events that might have originated from your .handler element, and you want a global flag that remembers whether the user is dragging or not:

var handler = document.querySelector('.handler');
var isHandlerDragging = false;

Then you can use the following logic to check if the user is dragging or not:

document.addEventListener('mousedown', function(e) {
  // If mousedown event is fired from .handler, toggle flag to true
  if (e.target === handler) {
    isHandlerDragging = true;
  }
});

document.addEventListener('mousemove', function(e) {
  // Don't do anything if dragging flag is false
  if (!isHandlerDragging) {
    return false;
  }

  // Set boxA width properly
  // [...more logic here...]
});

document.addEventListener('mouseup', function(e) {
  // Turn off dragging flag when user mouse is up
  isHandlerDragging = false;
});

Computing the width of box A

All you are left with now is to compute the width of box A (to be inserted in the [...more logic here...] placeholder in the code above), so that it matches that of the movement of the mouse. Flexbox will ensure that box B will fill up the remaining space:

// Get offset
var containerOffsetLeft = wrapper.offsetLeft;

// Get x-coordinate of pointer relative to container
var pointerRelativeXpos = e.clientX - containerOffsetLeft;

// Resize box A
// * 8px is the left/right spacing between .handler and its inner pseudo-element
// * Set flex-grow to 0 to prevent it from growing
boxA.style.width = (pointerRelativeXpos - 8) + 'px';
boxA.style.flexGrow = 0;

---

Working example

var handler = document.querySelector('.handler');
var wrapper = handler.closest('.wrapper');
var boxA = wrapper.querySelector('.box');
var isHandlerDragging = false;

document.addEventListener('mousedown', function(e) {
  // If mousedown event is fired from .handler, toggle flag to true
  if (e.target === handler) {
    isHandlerDragging = true;
  }
});

document.addEventListener('mousemove', function(e) {
  // Don't do anything if dragging flag is false
  if (!isHandlerDragging) {
    return false;
  }

  // Get offset
  var containerOffsetLeft = wrapper.offsetLeft;

  // Get x-coordinate of pointer relative to container
  var pointerRelativeXpos = e.clientX - containerOffsetLeft;
  
  // Arbitrary minimum width set on box A, otherwise its inner content will collapse to width of 0
  var boxAminWidth = 60;

  // Resize box A
  // * 8px is the left/right spacing between .handler and its inner pseudo-element
  // * Set flex-grow to 0 to prevent it from growing
  boxA.style.width = (Math.max(boxAminWidth, pointerRelativeXpos - 8)) + 'px';
  boxA.style.flexGrow = 0;
});

document.addEventListener('mouseup', function(e) {
  // Turn off dragging flag when user mouse is up
  isHandlerDragging = false;
});

body {
  margin: 40px;
}

.wrapper {
  background-color: #fff;
  color: #444;
  /* Use flexbox */
  display: flex;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  
  /* Use box-sizing so that element's outerwidth will match width property */
  box-sizing: border-box;
  
  /* Allow box to grow and shrink, and ensure they are all equally sized */
  flex: 1 1 auto;
}

.handler {
  width: 20px;
  padding: 0;
  cursor: ew-resize;
  flex: 0 0 auto;
}

.handler::before {
  content: '';
  display: block;
  width: 4px;
  height: 100%;
  background: red;
  margin: 0 auto;
}

<div class="wrapper">
  <div class="box">A</div>
  <div class="handler"></div>
  <div class="box">B</div>
</div>

Solution 2

Here's an example of the drag event handling, but using CSS Grids

The trick is to set the grid-template-columns (or rows) on the grid container rather than than the size of the grid items

let isLeftDragging = false;
let isRightDragging = false;

function ResetColumnSizes() {
  // when page resizes return to default col sizes
  let page = document.getElementById("pageFrame");
  page.style.gridTemplateColumns = "2fr 6px 6fr 6px 2fr";
}

function SetCursor(cursor) {
  let page = document.getElementById("page");
  page.style.cursor = cursor;
}

function StartLeftDrag() {
  // console.log("mouse down");
  isLeftDragging = true;

  SetCursor("ew-resize");
}

function StartRightDrag() {
  // console.log("mouse down");
  isRightDragging = true;

  SetCursor("ew-resize");
}

function EndDrag() {
  // console.log("mouse up");
  isLeftDragging = false;
  isRightDragging = false;

  SetCursor("auto");
}

function OnDrag(event) {
  if (isLeftDragging || isRightDragging) {
    // console.log("Dragging");
    //console.log(event);

    let page = document.getElementById("page");
    let leftcol = document.getElementById("leftcol");
    let rightcol = document.getElementById("rightcol");

    let leftColWidth = isLeftDragging ? event.clientX : leftcol.clientWidth;
    let rightColWidth = isRightDragging ? page.clientWidth - event.clientX : rightcol.clientWidth;

    let dragbarWidth = 6;

    let cols = [
      leftColWidth,
      dragbarWidth,
      page.clientWidth - (2 * dragbarWidth) - leftColWidth - rightColWidth,
      dragbarWidth,
      rightColWidth
    ];

    let newColDefn = cols.map(c => c.toString() + "px").join(" ");

    // console.log(newColDefn);
    page.style.gridTemplateColumns = newColDefn;

    event.preventDefault()
  }
}

#page {
  height: 100%;
  background-color: pink;
  display: grid;
  grid-template-areas: 'header header header header header' 'leftcol leftdragbar tabs tabs tabs' 'leftcol leftdragbar tabpages rightdragbar rightcol' 'leftcol leftdragbar footer footer footer';
  grid-template-rows: min-content 1fr 9fr 1fr;
  grid-template-columns: 2fr 6px 6fr 6px 2fr;
}


/*****************************/

#header {
  background-color: lightblue;
  overflow: auto;
  grid-area: header;
}

#leftcol {
  background-color: #aaaaaa;
  overflow: auto;
  grid-area: leftcol;
}

#leftdragbar {
  background-color: black;
  grid-area: leftdragbar;
  cursor: ew-resize;
}

#tabs {
  background-color: #cccccc;
  overflow: auto;
  grid-area: tabs;
}

#tabpages {
  background-color: #888888;
  overflow: auto;
  grid-area: tabpages;
}

#rightdragbar {
  background-color: black;
  grid-area: rightdragbar;
  cursor: ew-resize;
}

#rightcol {
  background-color: #aaaaaa;
  overflow: auto;
  grid-area: rightcol;
}

#footer {
  background-color: lightblue;
  overflow: auto;
  grid-area: footer;
}

<body onresize="ResetColumnSizes()">
  <div id="page" onmouseup="EndDrag()" onmousemove="OnDrag(event)">
    <div id="header">
      Header
    </div>
    <div id="leftcol">
      Left Col
    </div>
    <div id="leftdragbar" onmousedown="StartLeftDrag()"></div>
    <div id="tabs">
      Tabs
    </div>
    <div id="tabpages">
      Tab Pages
    </div>
    <div id="rightdragbar" onmousedown="StartRightDrag()"></div>
    <div id="rightcol">
      Rightcol
    </div>
    <div id="footer">
      Footer
    </div>
  </div>
</body>

https://codepen.io/lukerazor/pen/GVBMZK

Solution 3

I changed, so you can add more Horizontal and Vertical slider. test1.html:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="test1.css">
        <script src=  "test1.js" > </script>
    </head>
    <body>
        <div id="page" onmouseup="EndDrag()" onmousemove="OnDrag(event)">
            <div id="header">
                Header asdlkj flkdfj sdflkksdjf sd;flsdjf sd;flkjsd;fljsd;flsdj;fjsd f;sdlfj;sdlfj
            </div>
            <div id="leftcol">
                Left Col
            </div>
            <div id="leftdragbar" onmousedown="StartHDrag(1)"></div>
            <div id="tabs">
                Tabs
            </div>
            <div id="topdragbar" onmousedown="StartVDrag(2)"></div>
            <div id="tabpages">
                Tab Pages
            </div>
            <div id="rightdragbar" onmousedown="StartHDrag(3)"></div>
            <div id="rightcol">
                Rightcol
            </div>
            <div id="botdragbar" onmousedown="StartVDrag(4)"></div>
            <div id="footer">
                Footer
            </div>
        </div>
        <div id= 'status'></div>
    </body>
</html>

test1.css

body {
}

#page {
    height: 100vh;
    background-color: pink;
    display: grid;
    grid-template-areas:
        'header header header header header'
        'leftcol leftdragbar tabs tabs tabs'
        'leftcol leftdragbar topdragbar topdragbar topdragbar'
        'leftcol leftdragbar tabpages rightdragbar rightcol'
        'botdragbar botdragbar botdragbar botdragbar botdragbar'
        'footer footer footer footer footer';
    grid-template-rows: min-content 1fr 6px 9fr 6px 1fr;
    grid-template-columns: 2fr 6px 6fr 6px 2fr; 
}

/*****************************/
#header {
    background-color: lightblue;
    overflow: auto;
    grid-area: header;
}

#leftcol {
    background-color: #aaaaaa;
    overflow: auto;
    grid-area: leftcol;
}

#leftdragbar {
    background-color: black;
    grid-area: leftdragbar;
    cursor: ew-resize;
}

#topdragbar {
    background-color: black;
    grid-area: topdragbar;
    cursor: ns-resize;
}

#botdragbar {
    background-color: black;
    grid-area: botdragbar;
    cursor: ns-resize;
}

#tabs {
    background-color: #cccccc;
    overflow: auto;
    grid-area: tabs;
}

#tabpages {
    background-color: #888888;
    overflow: auto;
    grid-area: tabpages;
}

#rightdragbar {
    background-color: black;
    grid-area: rightdragbar;
    cursor: ew-resize;
}


#rightcol {
    background-color: #aaaaaa;
    overflow: auto;
    grid-area: rightcol;
}

#footer {
    background-color: lightblue;
    overflow: auto;
    grid-area: footer;
}

test1.js

let isHDragging = false;
let isVDragging = false;

let cols = ['2fr','6px','6fr','6px','2fr'];  //grid-template-columns: 2fr 6px 6fr 6px 2fr;
let colns = ['leftcol','','tabpages','','rightcol'];
let Tcols = [];

let rows = ['min-content','1fr','6px','9fr','6px','1fr'];  //grid-template-rows: min-content 1fr 6px 9fr 1fr
let rowns = ['header','tabs','','tabpages','','footer'];
let Trows = []
let CLfactor ;
let CRfactor ;
let gWcol = -1;
let gWrow = -1;

function StartHDrag(pWcol) {
    isHDragging = true;
    SetCursor("ew-resize");
    CLfactor = parseFloat(cols[pWcol-1]) / document.getElementById(colns[pWcol-1]).clientWidth;
    CRfactor = parseFloat(cols[pWcol+1]) / document.getElementById(colns[pWcol+1]).clientWidth;
    Tcols = cols.map(parseFloat);
    gWcol = pWcol;
}

function StartVDrag(pRow) {
    isVDragging = true;
    SetCursor("ns-resize");
    CLfactor = parseFloat(rows[pRow-1]) / document.getElementById(rowns[pRow-1]).clientHeight;
    CRfactor = parseFloat(rows[pRow+1]) / document.getElementById(rowns[pRow+1]).clientHeight;
    Trows = rows.map(parseFloat);
    gWrow = pRow;
}

function SetCursor(cursor) {
    let page = document.getElementById("page");
    page.style.cursor = cursor;
}

function EndDrag() {
    isHDragging = false;
    isVDragging = false;
    SetCursor("auto");
}

function OnDrag(event) {
    if(isHDragging) {
        Tcols[gWcol-1] +=  (CLfactor * event.movementX);
        Tcols[gWcol+1] -=  (CLfactor * event.movementX);
        
        cols[gWcol-1]  = Math.max(Tcols[gWcol-1],0.01) + "fr";
        cols[gWcol+1]  = Math.max(Tcols[gWcol+1],0.01) + "fr";
        let newColDefn = cols.join(" ");
        page.style.gridTemplateColumns = newColDefn;
        
    } else if (isVDragging) {
        Trows[gWrow-1] +=  (CLfactor * event.movementY);
        Trows[gWrow+1] -=  (CLfactor * event.movementY);
        
        rows[gWrow-1]  = Math.max(Trows[gWrow-1],0.01) + "fr";
        rows[gWrow+1]  = Math.max(Trows[gWrow+1],0.01) + "fr";
        let newRowDefn = rows.join(" ");
        page.style.gridTemplateRows = newRowDefn;
        document.getElementById("footer").innerHTML = newRowDefn;
    }
    event.preventDefault()
}

Comments

[Terry]

I don't quite get the behavior you are looking for: right now boxes A and B have identical sizes, so what should happen when I drag the handle to the left? I guess box A should shrink, but what about box B? The same goes if the handle is dragged to the right: should box A grow? What happens to box B?

[Aquazi]

Yes, exactly. I thought that by just giving the resize: both attritube to my box divs, and the draggable: true one to the handler I could accomplish exactly this.

[Terry]

Unfortunately, HTML is not smart like this ;) the resize attribute mostly works for <textarea> only. You will definitely need to use some heavylifting with JS.

[Aquazi]

I'd gladly do that, could you point me in some direction on how to dynamically change css with Javascript?

[Jacques]

It would be a perfect answer if only you sticked with grid and not switched to using flex. The OP said he is using CSS grids.

[Systems Rebooter]

simply amazing!

[NVRM]

You included jquery, but it's not in use!

[Terry]

@Cryptopat thanks, it was probably added by accident. Removed it now.

[James Fremen]

is it possible to set the initial width of box A?

[D4A60N]

This is very good, thank you! I second @james-freman question and add one of my own. Would it be fairly easy to add a third re-sizable box? TIA

[D4A60N]

Better yet, do this utilizing Bootstrap's latest flex-box system.

[Jorge Lazo]

I like this answer better, because it uses flexbox and not CSS grid (much better support), even though the question title refers to CSS grid first

[paralaxbison]

Thanks for the solution. What happens if you want to add more than one box to this? So far you can still only resize the first box.

[Deeksha Mulgaonkar]

Hi. I tried your solution for vertical dragBar. But I am facing an issue when I am dragging the handler to the top as it is taking the whole width of BoxA and reaches to the top tip. Actually I have used the minimum height instead of maximum height as previously handler was coming at the bottom tip when moved downwards. I am posting the jsFiddle of vertical slider. Please can any one tell me what am I doing wrong? JsFiddle : jsfiddle.net/kn507gtw/2

[Jose Martinez]

awesome answer. how would the code change so that the divider is horizontal... aka the A and B are on top of each other, not next to each other?

[Luca Faggianelli]

@Terry, I had some issues with wrapper.offsetLeft as the wrapper element is inside other divs, anyway using wrapper.getBoundingClientRect().left works

[blomster]

How does boxA ever grow again if you set it to flex 0 after you've clicked and dragged?

[Adam]

I made the same implementation before visiting this question except I did not put in boxA.style.flexGrow = 0; - does not work without without it.

[R Subha]

I found this answer useful but in my case, I have a doubt. Consider A and B as header data and corresponding to the header data I have some item data like 1 David so on.. Here when I drag A or B box I need the content of 1 and David below also need to be dragged can I know how to achieve that

[Amadeus]

Place the script in the body after all classes and divs or use document.onreadystatechange. It took me hours to run this example on my own. The document should be ready to access its elements. I am sure there are other ways as well. I am new to JS