Css 我的网格有问题吗

我正在构建生活游戏，但我的网格无法正确显示

如果调整浏览器的大小（缩小浏览器），单元格的网格看起来非常不相称

一定是我设置网格和正方形大小的方式有问题

我是CSS的初学者，所以非常感谢您的帮助！以下是我的尝试：

import React, { Component } from 'react';
import {Grid} from './Grid';
import './App.css';


class App extends Component {
  constructor(props){
    super(props);
    this.rows = 30;
    this.cols= 50;
    this.state = {generation:0, gridFull: Array(this.rows).fill(Array(this.cols).fill(0)) };
  }

  render(){
    console.log(this.state.gridFull)
  return (

      <div className="App">
     <Grid gridFull = {this.state.gridFull} rows={this.rows} cols= {this.cols}/>

       </div>
    );
  }
}

export default App;

import React,{Component} from 'react';
import {Cell} from './Cell';
import './App.css'; 


export class Grid extends Component{

    render(){

    return(
        <div className="grid" style={{border: '2px solid black'}}>
       {this.props.gridFull.map((boardrow,i) => 
          (<div key={i} className="board-row">
            {boardrow.map((square,k) => 

                <Cell key={k}/>
            )}
          </div>)
       )}

       </div>
        )
    }
}

import React, {Component} from 'react';
import './App.css';

export class Cell extends Component{
    render(){
        return(
            <div className="square" style={{ width: '1.67em', height: '1.67em' }}>
            </div>
            )
    }
}

.App {
   display: flex;
  flex-direction: row;

}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}


.square {
  background: #fff;
  border: 1px solid black ;
  float: left;
  padding: 0;
}
.square:focus {
  outline: none;
}

import React，{Component}来自'React'；
从“./Grid”导入{Grid}；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
这一行=30；
这个。cols=50；
this.state={generation:0，gridFull:Array（this.rows）.fill（Array（this.cols）.fill（0））；
}
render（）{
console.log（this.state.gridFull）
返回(
);
}
}
导出默认应用程序；
从“React”导入React，{Component}；
从“./Cell”导入{Cell}；
导入“/App.css”；
导出类网格扩展组件{
render（）{
返回(
{this.props.gridFull.map（（boardrow，i）=>
(
{boardrow.map（（正方形，k）=>
)}
)
)}
)
}
}
从“React”导入React，{Component}；
导入“/App.css”；
导出类单元格扩展组件{
render（）{
返回(
)
}
}
.App{
显示器：flex；
弯曲方向：行；
}
.董事会席位：之后{
明确：两者皆有；
内容：“；
显示：表格；
}
.广场{
背景：#fff；
边框：1px纯黑；
浮动：左；
填充：0；
}
.广场：焦点{
大纲：无；
}

您好，您能创建一个演示吗？对不起！结果如下：