如果 space 可用，则向相反方向推动元素

Question

我正在使用 CSS 网格布局编写表单并尝试在同一级别对齐输入。字段将有名称和错误标签，每个字段可以有 none，一个或两个。

目前，我有这个：

想要这样：

因此，如果向上或向下有 space 可用，则应将元素推向相反的方向，以保持字段始终对齐。

这是 CSS 表单标签：

grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 16px;

    & > :nth-child(3),
    & > :nth-child(4),
    & > :nth-child(7) {
        grid-column-start: 1;
        grid-column-end: 3;
    }

    & > * {
        overflow: hidden;
    }

谢谢！

编辑：

这里是HTML的基本组成（使用React所以我只放了重要的标签）：

form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 16px;
}

form > :nth-child(3),
form > :nth-child(4),
form > :nth-child(7) {
  grid-column-start: 1;
  grid-column-end: 3;
}

& > * {
    overflow: hidden;
}

.content {
  display: flex;
  flex-direction: column;
}

.label {
  margin-bottom: 4px;
}

.error {
  margin-top: 4px;
}

<form>
    <div class="content"> <!-- Each form's child is a div which contains labels and input -->
        <span class="label">Label</span> <!-- Span rendered only if exists -->
        <input />
        <!-- Span not rendered when there is no value -->
    </div>
    <div class="content"> <!-- Each form's child is a div which contains labels and input -->
      <!-- Span not rendered if no label value exists -->
      <input />
      <span class="error">Error</span> <!-- Span rendered if exists -->
  </div>
</form>

Answer 1

跨度（标签或错误）的固定高度如何，除非它可以是多行

form {
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px;
  display: grid;
}

form > :nth-child(3),
form > :nth-child(4),
form > :nth-child(7) {
  grid-column-start: 1;
  grid-column-end: 3;
}

form > * {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

form > div > span {
  height: 20px;
}

<form>
<div> <!-- Each form's child is a div which contains labels and input -->
    <span>Label</span> <!-- Label if exists -->
    <input />
    <span></span> <!-- Error if exists -->
</div>
<div> <!-- Each form's child is a div which contains labels and input -->
    <span></span> <!-- Label if exists -->
    <input />
    <span>Error</span> <!-- Error if exists -->
</div>
<div> <!-- Each form's child is a div which contains labels and input -->
    <span>Label</span> <!-- Label if exists -->
    <input />
    <span></span> <!-- Error if exists -->
</div>
<div> <!-- Each form's child is a div which contains labels and input -->
    <span>Label</span> <!-- Label if exists -->
    <input />
    <span></span> <!-- Error if exists -->
</div>
</form>

Answer 2

由于您已经使用内容 div 来包装标签并且它已经具有 display: flex 您只需将 margin-top: auto 添加到输入字段并使错误消息 position: absolute 并将其放在输入下方。这样，输入将始终位于 div 的底部，并且错误范围将始终呈现在下方。

只需确保在输入行之间允许一些额外的 space 以显示错误。

form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 16px;
}

form> :nth-child(3),
form> :nth-child(4),
form> :nth-child(7) {
  grid-column-start: 1;
  grid-column-end: 3;
}

&>* {
  overflow: hidden;
}

.content {
  display: flex;
  flex-direction: column;
  position: relative;
}

.label {
  margin-bottom: 4px;
}

.error {
  margin-top: 4px;
  position: absolute;
  top: 100%;
}

input {
  margin-top: auto
}

<form>
  <div class="content">
    <!-- Each form's child is a div which contains labels and input -->
    <span class="label">Label</span>
    <!-- Span rendered only if exists -->
    <input />
    <!-- Span not rendered when there is no value -->
  </div>
  <div class="content">
    <!-- Each form's child is a div which contains labels and input -->
    <!-- Span not rendered if no label value exists -->
    <input />
    <span class="error">Error</span>
    <!-- Span rendered if exists -->
  </div>
</form>

如果 space 可用，则向相反方向推动元素

Push element in the opposite direction if space is available

html

css

css-grid

grid-layout