调整标签/输入的高度

Question

我正在尝试创建一个包含3个表单的布局，其中我只有一个表单就位。我的问题是，内容是如何扩展到总高度，使输入字段和按钮高。当只有" form -1“时，这是不可见的，但是我需要并行添加几个表单，所以只添加一个表单并不能解决需求。

问题:如何在不设置固定高度的情况下，将高度设置为与标签相同？

​

.wrapper-for-forms {
  display: grid;
  grid-template:
  'form-1 form-2 form-3' 500px
  /1fr 1fr 1fr;
}

.form-1 {
  display: grid;
  grid-template-columns: 200px 400px;
  grid-gap: 16px;
}

.form-1 {
  margin-top: 10px;
}

label {
  grid-column: 1 / 2;
}

input,
button {
  grid-column: 2 / 3;
}

<div class="wrapper-for-forms">

  <form class="form-1">

    <label for="firstName" class="first-name">First Name</label>
    <input id="firstName" type="text">

    <label for="lastName" class="last-name">Last Name</label>
    <input id="lastName" type="text">

    <button>Submit</button>

  </form>

  <div class="form-2">Form-2</div>
  <div class="form-3">Form-3</div> 

</div>

​

Answer 1

您可以简单地将这一行grid-template:'form-1 form-2 form-3' 500px /1fr 1fr 1fr更改为grid-template:'form-1 form-2 form-3' 500px repeat(3, 1fr);或删除500px，使其看起来像grid-template:'form-1 form-2 form-3' repeat(3, 1fr);

.wrapper-for-forms {
  display: grid;
  grid-template: 'form-1 form-2 form-3' 500px repeat(3, 1fr);
}

.form-1 {
  display: grid;
  grid-template-columns: 200px 400px;
  grid-gap: 16px;
}

.form-1 {
  margin-top: 10px;
}

label {
  grid-column: 1 / 2;
}

input,
button {
  grid-column: 2 / 3;
}

<div class="wrapper-for-forms">

  <form class="form-1">

    <label for="firstName" class="first-name">First Name</label>
    <input id="firstName" type="text">

    <label for="lastName" class="last-name">Last Name</label>
    <input id="lastName" type="text">

    <button>Submit</button>

  </form>

  <div class="form-2">Form-2</div>
  <div class="form-3">Form-3</div>

</div>

​

如果您想改变方向，只需将上面的内容更改为grid-template:'form-1 form-2 form-3';

​

.wrapper-for-forms {
  display: grid;
  grid-template: 'form-1 form-2 form-3';
}

.form-1 {
  display: grid;
  grid-template-columns: 200px 400px;
  grid-gap: 16px;
}

.form-1 {
  margin-top: 10px;
}

label {
  grid-column: 1 / 2;
}

input,
button {
  grid-column: 2 / 3;
}

<div class="wrapper-for-forms">

  <form class="form-1">

    <label for="firstName" class="first-name">First Name</label>
    <input id="firstName" type="text">

    <label for="lastName" class="last-name">Last Name</label>
    <input id="lastName" type="text">

    <button>Submit</button>

  </form>

  <div class="form-2">Form-2</div>
  <div class="form-3">Form-3</div>

</div>

​