我的网格有问题

Question

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

如果您调整浏览器的大小（缩小它），则单元格网格看起来非常不成比例。

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

我是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;
}