在 CSS 网格中调整 textarea 的大小会改变网格布局

Question

我对 CSS grid 还很陌生。我做了一个简单的联系表格来试验这个系统。我的网格有 2 列和 5 行。我在左列中放置了 4 个inputs，在右列中放置了 1 个 textarea，在最后一行中放置了最后一个 input。 textarea 可以垂直调整大小。

问题是向下拖动textarea 会调整网格中所有行的大小，包括相邻列中的行，从而改变整体布局（参见下面的 sn-p 示例）。这对我来说似乎是一种正常且合乎逻辑的行为，但我想知道是否有任何方法可以阻止其他列中的行直接使用 grid 调整大小。

* {
    box-sizing: border-box;
}

html, body, input, textarea {
    padding: 0;
    margin: 0;
}

.form {
    margin: 10px;
    display: grid;
    grid-template: repeat(5, auto) / 4fr 6fr;
    grid-gap: 10px;
    grid-template-areas:
        ". textarea"
        ". textarea"
        ". textarea"
        ". textarea"
        "submit submit";
}

.input, .submit {
    height: 30px;
}

.submit {
    grid-area: submit;
}

.textarea {
    grid-area: textarea;
    resize: vertical;
    min-height: 150px;
}

<form class="form">
    <input class="input" type="text" />
    <input class="input" type="text" />
    <input class="input" type="text" />
    <input class="input" type="text" />
    <textarea class="textarea" name="message"></textarea>
    <input class="submit" type="submit" />
</form>

到目前为止，我发现解决此问题的最直接的解决方案是将前 4 个 inputs 包装在 div 中（例如使用 class="container"）并为其设置一个固定的 height，像这样：

.container {
    grid-area: container;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 150px;
}

可以，但我觉得不是很方便。

直接使用grid 可以解决这个问题吗？

Answer 1

看到这个：Prevent content from expanding grid items

回到你的问题，是的，你已经定义了一个区域'textarea'，然后将你的 textarea 固定到它上面。

textarea 区域被固定到网格对象 textarea 元素被固定到 AREA 当 textarea 增长时，它会增长网格，因此输入的行也会增长。

在我看来，让您在检查输入的同时扩展 textarea 的一种明智方法是向您的结构添加另一层，即网格容器的逻辑，并将其与 flex 结合以实现期望的结果。您可以将 flex 容器替换为由 1 列和自动行细分的另一个网格，但我看不出它的实用性是什么。无论如何，作为参考：

https://codepen.io/Capagris/pen/NWNrJoZ

HTML：

<form class="form">
    <div class="wrap">
      <input class="input" type="text" />
      <input class="input" type="text" />
      <input class="input" type="text" />
      <input class="input" type="text" />
      <input class="submit" type="submit" />
    </div>
    <textarea class="textarea" name="message"></textarea>
    
</form>

CSS：

* {
    box-sizing: border-box;
}

html, body, input, textarea {
    padding: 0;
    margin: 0;
}

.form {
    margin: 10px;
    display: grid;
    grid-template: repeat(5, auto) / 4fr 6fr;
    grid-gap: 10px;
    grid-template-areas:
        ". textarea"
        ". textarea"
        ". textarea"
        ". textarea"
        "submit submit";
}

.input, .submit {
    height: 30px;
    margin-bottom: 20px;
    width: 100%;
}

.submit {
    /*grid-area: submit;*/
}

.wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.textarea {
    /*grid-area: textarea;*/
    resize: vertical;
    min-height: 150px;
}