无法响应地渲染我的 CSS 网格布局

问题描述 投票：0回答：1

我正在尝试为国际象棋游戏制作一个网格。 8x8，有 64 个方格。 我希望网格根据屏幕尺寸扩大和缩小。我可以使用基本 html 和链接的 css 文件轻松实现所需的行为：

<body>
    <div class="wrapper">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>
</body>

.wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: 100%;
  background: #e1e1e1;
}

.square {
  border: solid black 1px;
  aspect-ratio: 1 / 1;
  display: flex;
}

但是，当我尝试使用 React 渲染组件来产生相同的结果时，我得到了完全不同的行为。正方形不会增大或缩小，它们只是散开，在柱子之间留下空间。

<body>
    <div id="root"></div>
    <script type="module" src="./src/main.jsx"></script>
</body>

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Board />
  </React.StrictMode>

import "./board.css"
export default function Board() {

    return (
        <div className="wrapper">
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
            <div className="square"></div>
        </div>
    )}

我期望网格能够扩展，同时保持 1 / 1 的纵横比并且列之间没有间隙。相反，网格通过水平拉伸来扩展，并在列之间引入间隙，而不改变正方形的形状或大小。

reactjs responsive-design css-grid grid-layout
1个回答
0
投票

我相信我已经解决了我的问题。不知何故，其他 css 文件被导入到我的反应项目中。即使我不再明确导入它们。我使用 Chrome 开发工具发现了这一点，并发现我的方形元素附加了一些旧样式。删除我已弃用的 css 文件后，网格布局完全按照预期呈现！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.