In reactjs, how do I distribute components horizontally across an encompassing div?-CodePudding

So I'm new to react and for the life of me I can't figure out how to make something like this: tic-tac-toe grid

I'm having trouble making a row component that renders a div with three different square components, distributed horizontally across the div. When I compile my code all the squares in a row are fixed to the same spot. How do I fix this, please?

my current code:

App.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 {

} */

Square.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>
               
    );
}

App.js

import logo from './logo.svg';
import './App.css';
import { Row } from './components/Row';

function App() {
  // App renders Row
  return (
    <Row />
  );
}

export default App;

Row.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>
    )
}

CodePudding user response：

import "./styles.css";

export default function App() {
  return (
    <div className={"row"}>
      <Square />
      <Square />
      <Square />
    </div>
  );
}

export function Square(props) {
  // Square is rendered by App

  return (
    <div className={"column"}>
      <button className="Square"> X </button>
      <button className="Square"> X </button>
      <button className="Square"> X </button>
    </div>
  );
}

Styles.css file

.App {
  font-family: sans-serif;
  text-align: center;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Read this article to get more understanding about flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CodePudding user response：

You can try to remove position: absolute in Square class:

.Square {
  width: 70px;
  height: 70px;
  border-color: #99ccff;
  text-align: center;
  font-size: xx-large;
  font-family: 'Courier New', Courier, monospace;
}