css - 使用 css 网格将所有子级垂直对齐

Question

我正在使用 CSS 网格设计一个表单，由于我是 CSS 网格的新手，我对使用 CSS 网格对齐感到震惊。

我的表单字段有一个标签和有关字段的提示。

我正在尝试将表单字段对齐，如下所示(不使用 javascript)。

但它没有按预期工作。这是我尝试用网格 codepen is here 做的实现

.wrapper{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(5rem, auto);
  grid-gap: 20px
}

.fieldContainer{
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.input{
  height: 35px;
  width: 100%;
  border: 1px solid #ddd;
}

.label{
  margin-bottom: 10px;
}

.hint{
  margin-top: 10px;
}

<div class="wrapper">
  <div class="fieldContainer">
      <label class="label">Field two bla bla bla bla bla bla bla bla bla bla Lorem ipsum dolor, sit amet consectetur</label>
     <div class="input"></div>
    <label for="" class="hint">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo cum quam architecto odit assumenda quo omnis ex ipsam mollitia esse nemo placeat, vitae quae facere dicta, sequi reprehenderit consectetur nobis.</label>
  </div>
  <div class="fieldContainer">
      <label class="label">Field two bla bla bla bla bla bla bla bla bla bla</label>
     <div class="input"></div>
    <label for="" class="hint">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo cum quam architecto odit assumenda quo omnis ex ipsam mollitia esse nemo placeat.</label>
  </div>
  <div class="fieldContainer">
      <label class="label">Field two bla bla bla bla bla bla bla bla bla bla Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio eveniet esse quasi perferendis</label>
     <div class="input"></div>
    <label for="" class="hint">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo cum quam </label>
  </div>
</div>

如果我犯了错误，请提供任何帮助或提示，在此先感谢。

Answer 1

使用 grid-template-rows: repeat(3, 1fr auto 1fr); 到 .fieldContainer。并从 .fieldContainer 中删除 grid-auto-rows。

这是工作片段:

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.fieldContainer {
  display: grid;
  grid-template-rows: repeat(3, 1fr auto 1fr);
}

.input {
  height: 35px;
  width: 100%;
  border: 1px solid #ddd;
}

.label {
  margin-bottom: 10px;
}

.hint {
  margin-top: 10px;
}

<div class="wrapper">
  <div class="fieldContainer">
    <label class="label">Field two bla bla bla bla bla bla bla bla bla bla Lorem ipsum dolor, sit amet consectetur</label>
    <div class="input"></div>
    <label for="" class="hint">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo cum quam architecto odit assumenda quo omnis ex ipsam mollitia esse nemo placeat, vitae quae facere dicta, sequi reprehenderit consectetur nobis.</label>
  </div>
  <div class="fieldContainer">
    <label class="label">Field two bla bla bla bla bla bla bla bla bla bla</label>
    <div class="input"></div>
    <label for="" class="hint">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo cum quam architecto odit assumenda quo omnis ex ipsam mollitia esse nemo placeat.</label>
  </div>
  <div class="fieldContainer">
    <label class="label">Field two bla bla bla bla bla bla bla bla bla bla Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio eveniet esse quasi perferendis</label>
    <div class="input"></div>
    <label for="" class="hint">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo cum quam </label>
  </div>
</div>