小编Asg*_*ing的帖子

我刚刚学习 React 和 Tailwind CSS，并在使用 Tailwind 类的 CSS 网格方面有过奇怪的经历。我已经为计算器制作了按钮，最后一个按钮跨越两列：

应用程序.js：

export default function App() {\n  return (\n    <div className="flex min-h-screen items-center justify-center bg-blue-400">\n      <Calculator />\n    </div>\n  );\n}\n

计算器.js

import { IoBackspaceOutline } from "react-icons/io5";\n\nexport const Calculator = () => {\n  return (\n    <div className="grid grid-cols-4 grid-rows-5 gap-2">\n      <Button>AC</Button>\n      <Button>\n        <IoBackspaceOutline size={26} />\n      </Button>\n      <Button>%</Button>\n      <Button>\xc3\xb7</Button>\n      <Button>7</Button>\n      <Button>8</Button>\n      <Button>9</Button>\n      <Button>x</Button>\n      <Button>4</Button>\n      <Button>5</Button>\n      <Button>6</Button>\n      <Button>-</Button>\n      <Button>1</Button>\n      <Button>2</Button>\n      <Button>3</Button>\n      <Button>+</Button>\n      <Button>0</Button>\n      <Button>.</Button>\n      <Button colSpan={2}>=</Button>\n    </div>\n  );\n};\n\nconst Button = ({ …