I have a form that is set up as a css grid, but I would like the submit button to always be at the bottom-right of the form.

I have seen some examples of how to force a child onto a new row, and I’m currently using that code, but it always puts the button at the bottom-left.

I’ve also toyed around with grid-column-end: -1, and that works for some widths, but it creates extra grids as the screen gets wider.

HTML:

<form id="sowingform">
    <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>

CSS:

#sowing form {
    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;
}

The form is display: grid, each fieldset is at least 175px and at most 100%, and it puts them beside each other as many times as the window width allows. I would just like the Submit button to be attached to the bottom-right, regardless of the number of columns.