Css Сетка не может влиять на элементы ввода

Question

Я изучаю css сетку, и я пытаюсь организовать страницу с входами и другим материалом. По какой-то причине ничего не работает, и я не могу понять, в чем проблема. Форма не показывает никакой реакции, не двигается вообще. Вот код html:

<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>

и вот код sass:

.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;
    }
}

как выглядит страница сейчас

как это должно выглядеть

Справка.

Answer 1

Форма отвечает не так, как вы ожидаете, потому что имеют значение только прямые дочерние элементы сетки (как и в случае с flexbox). .shipment-form является допустимым дочерним элементом сетки, потому что он на один уровень глубже от родительского элемента сетки, .shipment-page.

<div className="shipment-page">               <!-- grid parent -->
    <div className="shipment-form">           <!-- grid child -->
        <form onSubmit={this.handleSubmit}>   <!-- too deep—not a grid child -->

Попробуйте реструктурировать свой код так, чтобы родительский элемент сетки находился на один уровень выше входных контейнеров формы. Кроме того, у вас есть потенциальная ошибка в вашем коде. Ваш CSS ссылается на множественные входы , но ваш HTML класс использует единственный вход

<div className="first-input">

И затем:

.first-inputs{ ... } /* Oops, that class does not exist in your HTML */