Question

我试图通过使用鼠标拖动列分隔符（或调整占位符大小）来动态调整css网格布局框的大小。

我在public final boolean com.sun.proxy.$Proxy0.TCEnabled() Exception in thread "main" java.lang.UnsatisfiedLinkError: Error looking up function 'TCEnabled': The specified procedure could not be found. at com.sun.jna.Function.<init>(Function.java:179) at com.sun.jna.NativeLibrary.getFunction(NativeLibrary.java:345) at com.sun.jna.NativeLibrary.getFunction(NativeLibrary.java:325) at com.sun.jna.Library$Handler.invoke(Library.java:203) at com.sun.proxy.$Proxy0.TCEnabled(Unknown Source) at dlltest.DllTest.main(DllTest.java:70)元素上设置resize: horizontal;来调整大小，当我在元素的右下角拖动小调整大小手柄时它会调整大小，但相邻列的宽度不是自动调整，导致重叠。这是一个破碎的codepen。

HTML ：

nav

CSS ：

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

我希望css网格引擎自动处理这种情况，但显然不会。

我使用jquery-ui resizable进行了实验，但它似乎与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; }设置为动态值来使用jquery来完成它，但是不清楚如何通过调整大小句柄来调整元素大小所引发的事件。 jquery resize事件仅在grid-template-columns/rows:对象上触发，而不在dom元素上触发。

在不必处理像dragstart / dragend这样的低级鼠标事件的情况下，可以采用哪种方法？

Answer 1

仅使用CSS即可实现您想要实现的目标。我已经修改了您的示例。主要要点是：

最重要的是，尽量不要在语义布局标签中插入原始内容。使用标头，段落和列表标签，而不是text和br标签。这使您的代码更易于阅读和推理。您发生的许多问题是由于网格区域中的回流处理方式所致。
使用网格模板简化布局，因为这将使以后的断点重排更加容易。
使用溢出：自动；以及指定调整大小：垂直/水平。如果不设置溢出，则调整大小将失败。
使用最小/最大宽度/高度值创建调整大小的边界。

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>

Answer 2

解决方案是不使用显式固定列大小（grid-template-columns: 200px 1fr;），而是使用相对列大小，例如grid-template-columns: 0.2fr 1fr; - 然后grid CSS引擎将处理相邻框的大小调整。接下来是在网格框内添加嵌套div，将其最小高度/宽度设置为100％，并通过jqueryui resizable使其可调整大小。

固定的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>

❗️虽然这在最简单的情况下工作，但它在现实生活中的用例中会出现问题。我试过jquery-ui layout哪个更好（这里是一个demo），但是lib已经过时并且带有帧的故障，所以我选择了angular-split-pane（基于角度1）很好，尺寸较小。 _{（更新：看来该项目目前已被放弃，因此可能不是最佳选择）}

使用鼠标动态调整css网格布局中的列

2 个答案: