使用鼠标动态调整CSS网格布局中的列大小 [英] Dynamically resize columns in css grid layout with mouse

问题描述

我正在尝试通过使用鼠标拖动列分隔符(或调整大小的占位符)来动态调整CSS网格布局框的大小.

我在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;
}
 

我希望CSS网格引擎能够自动处理这种情况，但显然不会.

我尝试了 jquery-ui可调整大小，但它似乎不适用于CSS网格.

>

我正在研究如何通过将grid属性grid-template-columns/rows:设置为动态值来使用jquery，但尚不清楚如何捕获通过调整大小手柄调整元素大小而引发的事件. jQuery resize 事件仅在window对象上触发，而不在dom元素上触发.

在不必处理诸如dragstart/dragend之类的低级鼠标事件的情况下，有什么方法可以实现?

解决方案

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

1. 最重要的是，尽量不要在语义布局标签中插入原始内容.使用标头，段落和列表标签，而不是text和br标签.这使您的代码更易于阅读和推理.您发生的许多问题是由于在网格区域中如何处理回流焊造成的.
2. 使用网格模板简化布局，因为这将使以后的断点重排更加容易.
3. 使用溢出:自动；以及指定调整大小:垂直/水平.如果不设置溢出，则调整大小将失败.
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> 

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?

解决方案

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>

这篇关于使用鼠标动态调整CSS网格布局中的列大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！