Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dynamically resize columns in css grid layout with mouse

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?

like image 433
ccpizza Avatar asked Sep 04 '17 22:09

ccpizza


People also ask

How do I make my grid resizable CSS?

Use overflow: auto; along with specifying resize: vertical/horizontal. Without setting overflow, resize will fail. Use min/max width/height values to create boundaries for resizing.

How do you change the width of a grid column?

You can specify the width of a column by using a keyword (like auto ) or a length (like 10px ). The number of columns is determined by the number of values defined in the space-separated list.

What is autofit in CSS grid?

auto-fit FITS the CURRENTLY AVAILABLE columns into the space by expanding them so that they take up any available space. The browser does that after FILLING that extra space with extra columns (as with auto-fill ) and then collapsing the empty ones.

What is the difference between auto and 1fr in CSS grid?

Since the browser found a grid item of 1fr, it will allow such item to take all available space (that is 100% of the container), unless something else appears on that track. When the auto thing appears, it is only assigned, so to say it, enough space to exist (with its content, currently just a number).


2 Answers

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>
like image 180
baetheus Avatar answered Sep 30 '22 04:09

baetheus


The solution is to not use explicit fixed column size (grid-template-columns: 200px 1fr;) but use instead relative column sizes such as grid-template-columns: 0.2fr 1fr; — then the grid CSS engine will handle the resizing of adjacent boxes. Next thing is to add nested divs inside the grid boxes, set their min-height/width to 100% and make them resizable via jqueryui resizable.

The fixed jsfiddle.

/* Javscript */    $('.left_inner').resizable();  $('.right_top_inner').resizable();  $('.right_bottom_inner').resizable();
/* CSS */    	.grid {  		display: grid;  		grid-template-columns: 0.2fr 1fr;  		grid-template-rows: 1fr 4fr;          grid-gap: 3px;  		position: relative;  	}    	.left {  		grid-row: 1 / span 2;  	}    	.right_top {  		grid-column: 2;  		grid-row: 1;  	}    	.right_bottom {  		grid-column: 2;  		grid-row: 2;  	}    	.left_inner {  		background-color: #fedcd2;  		padding: 0;  		width: 100%;  		min-width: 100%;  		height: 100%;  		min-height: 100%;  		text-align: center;  	}    	.right_top_inner {  		background-color: #f9cf00;  		padding: 0;  		width: 100%;  		min-width: 100%;  		height: 100%;  		min-height: 100%;  		text-align: center;  	}    	.right_bottom_inner {  		background-color: #f8eee7;  		padding: 0;  		width: 100%;  		min-width: 100%;  		height: 100%;  		min-height: 100%;  		text-align: center;  	}
<!-- HTML -->    <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />  <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>    	<main class="grid">  	 <aside class='left'>  	  <div class="left_inner">  		drag the bottom right handle to resize  	  </div>  	 </aside>  	 <section class="right_top">  	  <div class="right_top_inner">right_top_inner</div>  	 </section>  	 <section class="right_bottom">  	  <div class="right_bottom_inner">right_bottom_inner</div>  	 </section>  	</main>

❗️ While this works in the simplest possible scenario, it gets problematic in a real life use case. I tried jquery-ui layout which worked somewhat better (here is a demo), but the lib is outdated and is glitchy with frames, so I went with angular-split-pane (based on angular 1) which works fine and is smaller in size. (update: it appears that the project is currently abandoned so probably not the best choice)

like image 21
ccpizza Avatar answered Sep 30 '22 04:09

ccpizza