从 CSS 网格中删除子项

Question

我有一个设置为 CSS 网格的表单，但我希望提交按钮始终位于表单的右下角。

我已经看到了一些示例如何强制子元素进入新行，我目前正在使用该代码，但它总是将按钮放在左下角。

我也尝试过

grid-column-end: -1

，这适用于某些宽度，但随着屏幕变宽，它会创建额外的网格。

body {
  background: silver;
}

#sowing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 1rem;
}

#sowing fieldset {
  border: 1px solid white;
}

#sowing legend {
  margin-left: 0.25rem;
  padding: 0.5rem;
  border: 1px solid white;
}

#sowing label, #sowing input {
  display: block;
  width: calc(100% - 0.5rem);
}

#sowing label {
  margin-bottom: 0.25rem;
}

#sowing input {
  margin-bottom: 1rem;
}

#sowing input[type="submit"] {
  grid-column-start: 1;
  place-self: end;
  width: auto;
  padding: 0.25rem 0.5rem;
}

<form id="sowing">
  <fieldset>
    <legend>Personal Information</legend>
    <label for="firstname">First Name</label>
    <input type="text" id="firstname">
    <label for="lastname">Last Name</label>
    <input type="text" id="lastname">
    <label for="phone">Phone Number</label>
    <input type="text" id="phone">
    <label for="email">E-Mail Address</label>
    <input type="text" id="email">
  </fieldset>
  <fieldset>
    <legend>Mailing Address</legend>
    <label for="address">Street</label>
    <input type="text" id="address">
    <label for="city">City</label>
    <input type="text" id="city">
    <label for="state">State</label>
    <input type="text" id="state">
    <label for="zip">Zip Code</label>
    <input type="text" id="zip">
  </fieldset>
  <fieldset>
    <legend>Credit Card Information</legend>
    <label for="ccnumber">Credit Card Number</label>
    <input type="text" id="ccnumber">
    <label for="expiration">Expiration Date</label>
    <input type="text" id="expiration">
    <label for="code">CVV</label>
    <input type="text" id="code">
  </fieldset>
  <input type="submit" value="Submit">
</form>

形式为

display: grid

，每个字段集至少为175px，最多为100%，并且在窗口宽度允许的范围内将它们彼此并排放置多次。我只想将“提交”按钮附加到右下角，无论列数如何。

Answer 1

我会通过从网格中排除提交按钮来解决这个问题。不要将整个表单设置为网格，而是将字段集包装在 div 中并将其设置为网格。然后只需在表单上使用

text-align: right

即可将提交按钮置于右侧。

body {
  background: silver;
}

#sowing {
  text-align: right;
}

#sowing>div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 1rem;
  margin-bottom: 1em;
  text-align: left;
}

#sowing fieldset {
  border: 1px solid white;
}

#sowing legend {
  margin-left: 0.25rem;
  padding: 0.5rem;
  border: 1px solid white;
}

#sowing label, #sowing input {
  display: block;
  width: 100%;
}

#sowing label {
  margin-bottom: 0.25rem;
}

#sowing input {
  margin-bottom: 1rem;
}

#sowing input[type="submit"] {
  display: inline;
  width: auto;
  padding: 0.25rem 0.5rem;
}

<form id="sowing">
  <div>
    <fieldset>
      <legend>Personal Information</legend>
      <label for="firstname">First Name</label>
      <input type="text" id="firstname">
      <label for="lastname">Last Name</label>
      <input type="text" id="lastname">
      <label for="phone">Phone Number</label>
      <input type="text" id="phone">
      <label for="email">E-Mail Address</label>
      <input type="text" id="email">
    </fieldset>
    <fieldset>
      <legend>Mailing Address</legend>
      <label for="address">Street</label>
      <input type="text" id="address">
      <label for="city">City</label>
      <input type="text" id="city">
      <label for="state">State</label>
      <input type="text" id="state">
      <label for="zip">Zip Code</label>
      <input type="text" id="zip">
    </fieldset>
    <fieldset>
      <legend>Credit Card Information</legend>
      <label for="ccnumber">Credit Card Number</label>
      <input type="text" id="ccnumber">
      <label for="expiration">Expiration Date</label>
      <input type="text" id="expiration">
      <label for="code">CVV</label>
      <input type="text" id="code">
    </fieldset>
  </div>
  <input type="submit" value="Submit">
</form>