使用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。并从grid-auto-rows删除.fieldContainer。

以下是工作代码段：

.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>

Answer 2

您不需要包装器上的网格自动行，只需将fieldContainer更改为重复（3,1fr）

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

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