Css 网格 - html 表单 - 我无法在垂直流中引导我的元素

Question

我无法用我的 flexbox 创建垂直方向。

Demo here。

尽管我专门创建了一个网格来垂直引导它们。我无法弄清楚它为什么会失败。 我已经尝试使用方向属性使用 flexbox 基础，但它失败了。

这里是我的 react.js sn-p：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import style from "./styles.css";

class App extends Component {
  state = {
    name: "",
    email: "",
    message: ""
  };

  onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  sendForm = e => {
    e.preventDefault();
    console.log(
      "form sent: ",
      this.state.name,
      this.state.email,
      this.state.message
    );
  };

  render() {
    return (
      <div>
        <form className={style.mailform_container} onSubmit={this.sendForm}>
          <div>
            <input
              className={style.mailform_name}
              onChange={this.onChange}
              name="name"
              type="text"
              value={this.state.name}
              placeholder="name"
            />
            <input
              className={style.mailform_email}
              onChange={this.onChange}
              name="email"
              type="text"
              value={this.state.email}
              placeholder="email"
            />
            <textarea
              className={style.mailform_message}
              onChange={this.onChange}
              name="message"
              type="text"
              value={this.state.message}
              placeholder="message"
            >
              Enter text here...
            </textarea>
          </div>

          <button type="submit" className={style.mailform_confirm}>
            Envoyer
          </button>
        </form>
      </div>
    );
  }
}

const root = document.getElementById("root");
ReactDOM.render(<App />, root);

这里是我的 style.css sn-p：

.mailform_container {
  display: grid;
  grid-template-areas:
    "name"
    "email"
    "message"
    "confirm";
}

.mailform_name {
  grid-area: name;
}

.mailform_email {
  grid-area: email;
}

.mailform_message {
  grid-area: message;
}

.mailform_confirm {
  grid-area: confirm;
}

.nmailform_confirm:hover {
  cursor: pointer;
}

.nmailform_confirm:active {
  background-color: rgb(200, 198, 196);
}

任何提示都会很棒， 谢谢

Answer 1

使用网格时，您希望被网格放置的所有元素都需要是网格的直接子级。在您的情况下，您有一个 <div> 元素作为包装所有其他表单元素的第一个子元素，因此表单元素不是网格的一部分。如果您删除 <div>，您的示例将起作用。