Css Grid 不能影响输入项

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

how the page looks like now

how it should look like

帮助。

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 引用复数 inputs 但您的 HTML 类使用单数 input

<div className="first-input">

然后：

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