I am creating a basic test application using NextJS/React.
Take a look at the code snippet below:
The content of Board.tsx file:
import './Board.css';
export default function Board() {
return <div className="board">
<Row/>
<Row/>
<Row/>
</div>
} /* End of Board */
function Row() {
return <div className="row">
<Cell/>
<Cell/>
<Cell/>
</div>
} /* End of Row */
function Cell() {
return <div className="cell"/>
} /* End of Cell */
And here is what's inside the Board.css file:
.cell {
width: 3rem;
height: 3rem;
background-color: rgb(255, 255, 0);
border-width: 2px;
border-color: rgb(55, 55, 55);
margin: 11%;
}
.row {
display: flex;
flex-direction: row;
}
.board {
display: flex;
flex-direction: column;
}
At the top is the app/page.tsx file:
import Image from 'next/image'
import Board from './components/Board'
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
X4C APP
<Board/>
</main>
)
}
This is how the app displays in the web browser when it's running:
https://i.stack.imgur.com/9HoPv.png
Lastly, I have a question. Why do we not see perfect yellow squares even though the css specifies a fixed width and height for the cell component?
After some experimentation, I noticed that removing the following two blocks
.row {...}
.board {...}
from the Board.css file results in perfect squares being displayed.
So, what causes this issue in those two blocks?