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

Question

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

我设置resize: horizontal; 在nav元素上调整大小，当我在元素的右下角拖动小调整大小手柄时它会调整大小，但不会自动调整相邻列的宽度，这会导致重叠。 这是一个破碎的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;
}

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

我尝试使用jquery-ui可调整大小，但它似乎不适用于css网格。

我正在研究如何通过将网格属性grid-template-columns/rows:设置为动态值来使用jquery来完成它，但是不清楚如何通过调整大小句柄来调整元素大小所引发的事件。 jquery resize事件仅在window对象上触发，而不在dom元素上触发。

在不必处理像dragstart / dragend这样的低级鼠标事件的情况下，可能有什么办法呢？

Answer 1

你想要实现的只能使用css。 我修改了你的例子。 主要内容如下：

1. 最重要的是，尽量不要在语义布局标签中插入原始内容。 使用标题，段落和列表标签而不是文本和br标签。 这使您的代码更易于阅读和更容易推理。 您的许多问题都发生在网格区域如何处理回流。
2. 使用grid-template来简化布局，因为它可以在以后更容易地使断点回流。
3. 使用overflow：auto; 以及指定调整大小：垂直/水平。 如果没有设置溢出，调整大小将失败。
4. 使用最小/最大宽度/高度值创建调整大小的边界。

 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; - 然后网格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布局 ，它工作得更好（这是一个演示 ），但是lib已经过时并且带有框架的故障，所以我选择了角度分割窗格 （基于角度1），它工作正常并且更小尺寸。 _{（更新：看来该项目目前已被放弃，所以可能不是最佳选择）}