题意：
使用鼠标动态调整 CSS 网格布局中的列宽
问题背景：
I am trying to dynamically resize css grid layout boxes by dragging the column dividers (or resize placeholders) with the mouse.
我正在尝试通过拖动列分隔符（或调整大小占位符）来动态调整 CSS 网格布局中的盒子大小。
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 我在 nav 元素上设置了 resize: horizontal; 以便调整大小，当我拖动元素右下角的小调整大小手柄时，元素的大小确实会改变，但相邻列的宽度不会自动调整，从而导致重叠。这里是一个失效的示例： 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.
我原本期待 CSS 网格引擎能够自动处理这种情况，但显然它没有。
I experimented with jquery-ui resizable but it does not seem to work well with css grids.
我尝试了 jquery-ui resizable，但它似乎与 CSS 网格不太兼容。
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.
我正在研究如何通过 jQuery 设置 grid-template-columns/rows 属性为动态值来实现，但目前还不清楚如何捕获通过调整大小手柄调整元素时触发的事件。jquery resize 事件仅在 window 对象上触发，而不是在 DOM 元素上。
What might be a way to do it without having to handle low-level mouse events like dragstart/dragend?
有没有一种方法可以在不处理低级鼠标事件（如 dragstart/dragend）的情况下实现这一点？
问题解决：
What you are looking to achieve is possible using only css. I've modified your example. The main takeaways are this:
你想要实现的目标是仅使用 CSS 就可以做到的。我已经修改了你的示例。主要的要点是：
- 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. 最重要的是，尽量不要在语义化布局标签中插入原始内容。使用
header、paragraph和list标签，而不是text和br标签。这样可以使你的代码更易于阅读和理解。你的许多问题都是因为网格区域中的重排（reflow）处理方式造成的。 - Use grid-template to simplify your layout as it will make breakpoint reflow easier later on. 使用
grid-template来简化你的布局，因为它将使后续的断点重排更容易。 - Use overflow: auto; along with specifying resize: vertical/horizontal. Without setting overflow, resize will fail. 使用
overflow: auto;并指定resize: vertical/horizontal。如果不设置overflow，调整大小将会失败。 - Use min/max width/height values to create boundaries for resizing. 使用
min/max宽度/高度值来为调整大小创建边界。
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>
