如何应用 css grid-template-areas 跨越多个网格

Question

我正在尝试使用网格模板区域复制计算器。

如您所见，“0”按钮应该水平延伸两个网格，但我无法让它工作。我的设置只把“0”放在一个格子里，把另外两个格子向左移动。

我正在效仿here。

谢谢，

App.js

import logo from "./logo.svg";
import "./App.css";
import Button from "./components/Button";
import NumberButton from "./components/NumberButton";

function App() {
  return (
    <div className="App">
      <Button text="AC" className="ac" />
      <Button text="+/-" className="polarity" />
      <Button text="%" className="percent" />
      <Button text="+" className="divide" />
      <NumberButton number="7" className="seven" />
      <NumberButton number="8" className="eight" />
      <NumberButton number="9" className="nine" />
      <Button text="x" className="multi" />
      <NumberButton number="4" className="four" />
      <NumberButton number="5" className="five" />
      <NumberButton number="6" className="six" />
      <Button text="-" className="minus" />
      <NumberButton number="1" className="one" />
      <NumberButton number="2" className="two" />
      <NumberButton number="3" className="three" />
      <Button text="+" className="plus" />
      <NumberButton number="0" className="zero2" />

      <Button text="." className="dot1" />
      <Button text="=" className="equal" />
    </div>
  );
}

export default App;

App.css

.App {
  display: grid;
  grid-template-areas:
    "ac polarity percent divide"
    "seven eight nine multi"
    "four five fix minus"
    "one two three plus"
    "zero2 zero2 dot1 equal";
  text-align: center;
}

.ac {
  grid-area: ac;
}
.polarity {
  grid-area: polarity;
}
.percent {
  grid-area: percent;
}
.divide {
  grid-area: divide;
}
.seven {
  grid-area: seven;
}
.eight {
  grid-area: eight;
}
.nine {
  grid-area: nine;
}
.multi {
  grid-area: multi;
}
.four {
  grid-area: four;
}
.five {
  grid-area: five;
}
.six {
  grid-area: six;
}
.minus {
  grid-area: minus;
}
.one {
  grid-area: one;
}
.two {
  grid-area: two;
}
.three {
  grid-area: three;
}
.plus {
  grid-area: plus;
}
.zero2 {
  grid-area: zero2;
}
.dot1 {
  grid-area: dot1;
}
.equal {
  grid-area: equal;
}

Answer 1

事实证明，当我尝试将 class 直接应用于 React 组件时，我对 React 犯了一个错误。我真的应该将它作为组件传递给组件，然后将它应用于组件内的 html，如下所示。

App.js

import logo from "./logo.svg";
import "./App.css";
import Button from "./components/Button";
import NumberButton from "./components/NumberButton";

function App() {
  return (
    <div className="App">
      <Button text="AC" class_name="ac" />
      <Button text="+/-" class_name="polarity" />
      <Button text="%" class_name="percent" />
      <Button text="+" class_name="divide" />
      <NumberButton number="7" class_name="seven" />
      <NumberButton number="8" class_name="eight" />
      <NumberButton number="9" class_name="nine" />
      <Button text="x" class_name="multi" />
      <NumberButton number="4" class_name="four" />
      <NumberButton number="5" class_name="five" />
      <NumberButton number="6" class_name="six" />
      <Button text="-" class_name="minus" />
      <NumberButton number="1" class_name="one" />
      <NumberButton number="2" class_name="two" />
      <NumberButton number="3" class_name="three" />
      <Button text="+" class_name="plus" />
      <NumberButton number="0" class_name="zero2" />

      <Button text="." class_name="dot1" />
      <Button text="=" class_name="equal" />
    </div>
  );
}

export default App;

Button.js

import React, { Component } from "react";

export default class Button extends Component {
  render() {
    return (
      <div className={this.props.class_name}>
        <p>{this.props.text}</p>
      </div>
    );
  }
}

如何应用 css grid-template-areas 跨越多个网格

How to apply css grid-template-areas to span multiple grid

html

css

reactjs

css-grid