I am trying to make a grid for a chess game. 8x8 with 64 squares. I want the grid to expand and shrink depending on the screen size. I can easily achieve the desired behavior using basic html and a linked css file:
<body>
<div class="wrapper">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</body>
.wrapper {
display: grid;
grid-template-columns: repeat(8, 1fr);
width: 100%;
background: #e1e1e1;
}
.square {
border: solid black 1px;
aspect-ratio: 1 / 1;
display: flex;
}
However when I try to produce the same result using react rendering a component, I get totally different behavior. The squares do not grow or shrink, they simply spread apart leaving space between the columns.
<body>
<div id="root"></div>
<script type="module" src="./src/main.jsx"></script>
</body>
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<Board />
</React.StrictMode>
import "./board.css"
export default function Board() {
return (
<div className="wrapper">
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
<div className="square"></div>
</div>
)}
I was expecting the grid to expand while maintaining the 1 / 1 aspect ratio and no gaps between columns. Instead, the grid expands by stretching horizontally and introduces gaps between columns without changing the shape or size of the squares.
I believe I have solved my problem. Somehow other css files were being imported into my react project. Even though I was not explicitly importing them any longer. I discovered this using chrome developer tools and found that there was some legacy styling attached to my square elements. After deleting my deprecated css files, the grid-layout is rendering exactly as desired!