html - 调整表格中标签/输入的高度

Question

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

Question: How can I set the height to be same as the labels, without setting fixed heights?

.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'重复(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>