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

问题描述

我刚接触CSS mouse.move(0,3) sleep(0.024) mouse.move(-2,3) sleep(0.024) mouse.move(0,4) sleep(0.024) mouse.move(-2,5)。我制作了一个简单的联系表以试用该系统。我的网格有2列5行。我在左栏中放置了4 grid，在右栏中放置了1 input，在最后一行放置了最后一个textarea。 input可以垂直调整大小。

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

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

到目前为止，我发现要解决此问题的最直接的方法是将前4个<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>包装在input内（例如div）并设置一个固定值class="container"，如下所示：

height

它可以工作，但我觉得不太方便。

直接使用.container { grid-area: container; display: flex; flex-direction: column; justify-content: space-between; height: 150px; }是否可以解决此问题？

解决方法

查看此：Prevent content from expanding grid items

回到您的问题，是的，您已经定义了一个'textarea'区域，然后将您的textarea固定到该区域。

textarea区域被固定到网格对象 textarea元素固定到AREA 当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;
}

css-grid grid-layout