Así que soy nuevo en reaccionar y por mi vida no puedo entender cómo hacer algo como esto: cuadrícula de tic-tac-toe

Tengo problemas para crear un componente de fila que represente un div con tres componentes cuadrados diferentes, distribuidos horizontalmente en el div. Cuando compilo mi código, todos los cuadrados en una fila se fijan en el mismo lugar. ¿Cómo soluciono esto, por favor?

mi código actual:

Aplicación.css

 .Row { text-align: center; position: absolute; left: 35%; right: 50%; top: 25%; width: 25%; height: 25%; display: flex; } .Square { position: absolute; width: 70px; height: 70px; border-color: #99ccff; text-align: center; font-size: xx-large; font-family: 'Courier New', Courier, monospace; } /* .Row { } */

Cuadrado.js

 import React from 'react'; import ReactDOM from 'react-dom'; export function Square(props){ // Square is rendered by App return( <div > <button className='Square'> X </button> </div> ); }

Aplicación.js

 import logo from './logo.svg'; import './App.css'; import { Row } from './components/Row'; function App() { // App renders Row return ( <Row /> ); } export default App;

Fila.js

 import React from 'react'; import ReactDOM from 'react-dom'; import { Square } from './Square'; export function Row() { return( <div className='Row'> <Square /> <Square /> <Square /> </div> ) }