有条件地将项目放置在网格布局中

Question

我的网格中有几个场景。我有 4 个可能的网格元素，但根据用户从上一个屏幕中的选择，我可能只显示其中三个。

我遇到了一个问题，在特定情况下，我只想显示 3 个元素（每行 2 个），底行的第三个元素放在最右边，基本上留下一个空白空间第二行的第一个元素通常是。

const MyGrid = styled(OtherGrid)`
  @media (max-width: ${BP.SMALL - 1}px) {
    div:nth-child(2) {
      grid-row-start: 3;
    }
    div:nth-child(3) {
      grid-row-start: 2;
    }
  }
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
`;

我的网格的样式来自另一个网格，但总而言之，就像一个基本网格。

<MyGrid>
        <FormGroup
          type={"number"}
          name={"initial_moisture"}
          label={"Initial Moisture (%)"}
          step={0.1}
          required
        />
        <FormGroup
          type={"number"}
          name={"initial_temp"}
          label={`Initial Temperature (${isMetric ? "C" : "F"})`}
          step={1}
          required
        />
        {operatingMode != "auto_cool" && (
          <>
            <FormGroup
              type={"number"}
              name={"final_moisture"}
              label={"Target Moisture (%)"}
              step={0.1}
              required
            />
          </>
        )}
        {operatingMode != "auto_hydrate" && (
          <>
            <FormGroup
              class={"auto-cool"}
              type={"number"}
              name={"final_temp"}
              label={`Target Temperature (${isMetric ? "C" : "F"})`}
              step={1}
              required
            />
          </>
        )}
</MyGrid>

在这里的最后一个可能状态（operatingMode != "auto-hydrate"），我想将该元素放在第二行，但也放在第二列，并在第二行留一个空白区域，首先柱子。我的父容器GoalsFieldGrid 中是否有我可以定义的东西来帮助我做到这一点？
grid-column: -1; 是我正在寻找的东西，但我不确定如何在该特定场景中应用它。

Answer 1

如果我理解正确，您只有在只有三个元素时才需要这个。

在这种情况下，您可以使用:nth-child(3):last-child 来选择元素。

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  margin-bottom: 1em;
  gap: .25em;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  border: 1px solid grey;
}

.item:nth-child(3):last-child {
  grid-column: 2;
}

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>