Css Grid Can't Affect Input Items - html

Question

I'm learning css grid and i'm trying to arrange a page with inputs and other stuff.
Nothing works for some reason and i can't figure out what the problem is.
The form doesn't show any reaction, doesn't move at all.
Here's the html code:
<div className="shipment-page">
<div className="shipment-form">
<form onSubmit={this.handleSubmit}>
<div className="first-input">
<label className="sp-input-label" htmlFor="first_name">First Name</label>
<input
type="text"
name='first_name'
className="sp-input first"
value={this.state.first_name}
onChange={this.handleChange}
required
/>
</div>
<div className="second-input">
<label className="sp-input-label" htmlFor="last_name">Last Name</label>
<input
type="text"
name='last_name'
className="sp-input second"
value={this.state.last_name}
onChange={this.handleChange}
required
/>
</div>
<div className="third-input">
<label className="sp-input-label" htmlFor="address">Address</label>
<input
type="text"
name='address'
className="sp-input"
value={this.state.address}
onChange={this.handleChange}
required
/>
</div>
<div className="fourth-input">
<label className="sp-input-label" htmlFor="Zip Code">Zip Code</label>
<input
type="number"
name='zip_code'
className="sp-input"
value={this.state.zip_code}
onChange={this.handleChange}
required
/>
</div>
<div className="fifth-input">
<label className="sp-input-label" htmlFor="phone_number">Phone Number</label>
<input
type="number"
name='phone_number'
className="sp-input"
value={this.state.phone_number}
onChange={this.handleChange}
required
/>
</div>
<div className="check-current-address">
<label htmlFor="current_address">Is this your current address? </label>
<input
type="radio"
name="current_address"
value={true}
onChange={this.handleChange}
required
/><span>Yes</span>
<input
type="radio"
name="current_address"
value={false}
onChange={this.handleChange}
required
/><span>No</span>
</div>
<CustomButton type='submit'>Add Address</CustomButton>
</form>
</div>
<span className="progress-indicator">
<StepProgress/>
</span>
</div>
and here's the sass code:
.shipment-page{
margin: 100px;
display: grid;
grid-template-columns: repeat(2, minmax(375px, 1fr)) minmax(300px, 1fr);
grid-template-rows: repeat(6, 50px) 1fr;
grid-template-areas:
"first second info-box"
"third third info-box"
"fourth fifth info-box"
"check . ."
"buttons . ."
"progres progres progres";
.shipment-form{
grid-row: 1/6;
grid-column: 1/3;
.first-inputs{
grid-area: first;
}
.second-inputs{
grid-area: second;
}
.third-inputs{
grid-area: third;
}
.fourth-inputs{
grid-area: fourth;
}
.fifth-inputs{
grid-area: fifth;
}
.sp-input{
background: none;
background-color: white;
color: grey;
font-size: 18px;
padding: 10px 10px 10px 5px;
width: 100%;
border: none;
border-radius: 0;
border-bottom: 1px solid grey;
&:focus{
outline: none;
color: black;
border-bottom: 1px solid black;
}
}
.check-current-address{
margin-bottom: 25px;
}
}
.progress-indicator{
grid-area: progres;
}
}
how the page looks like now
how it should look like
Help.

Answer 1

The form isn't responding the way you expect because only direct grid children matter (just like with flexbox). .shipment-form is a valid grid child because it's one level deep from the grid parent, .shipment-page.
<div className="shipment-page"> <!-- grid parent -->
<div className="shipment-form"> <!-- grid child -->
<form onSubmit={this.handleSubmit}> <!-- too deep—not a grid child -->
Try to restructure your code so that the grid parent is one level above your form input containers. Also, you have a potential bug in your code. Your CSS is referencing the plural inputs but your HTML class is using the singular input
<div className="first-input">
And then:
.first-inputs{ ... } /* Oops, that class does not exist in your HTML */