Conditionally place item within grid layout - html

Question

I have a few scenarios in my grid. I have 4 possible grid elements, but depending on a user selection from the previous screen, I might only display three of those.
I'm running into an issue where in a particular circumstance, I want to display only 3 elements (2 per row), with the third element on the bottom row placed to the far right, essentially leaving an empty space where the first element of the second row normally would be.
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;
`;
My grid is styled from another grid, but all in all, acts like a basic grid.
<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>
In the last possible state here (operatingMode != "auto-hydrate"), I want to place that element on the second row, but in the second column as well, and leave an empty space on the 2nd row, first column. Is there something within my parent container GoalsFieldGrid that I can define that will help me do this?
grid-column: -1; is what I'm looking for, but I'm not sure how to apply it in that specific scenario.

Answer 1

If I understand correctly you only require this when there are three elements only.
That being the case you can use :nth-child(3):last-child to select the element.
.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>