ARTICLE AD BOX
I am building a chessboard UI in React using Tailwind CSS and CSS Grid.
The board is an 8x8 grid (grid-cols-8) where each square is a <div> using w-full h-full.
Each square optionally contains an SVG chess piece.
When a square does not contain a chess piece (SVG),the square collapses vertically and becomes height 0.
When a piece is present, the square renders correctly.
When it is empty, the grid cell visually collapses and the board layout becomes unstable.
<div className="grid grid-cols-8 w-full border" style={{ aspectRatio: "1 / 1" }}> {displayBoard.map((row, rIndex) => row.map((piece, cIndex) => ( <div key={`${rIndex}-${cIndex}`} className="relative w-full h-full flex items-center justify-center" > {piece && ( <div className="w-4/5 h-4/5"> {Pieces[piece.color][piece.type]} </div> )} </div> )) )} </div>
When {piece} is null:
The inner <div> is not rendered at all
The grid cell has no intrinsic height
CSS Grid collapses the row height to 0
Result: the chessboard visually breaks
The problem happens because of this combination:
className="w-full h-full"and:
{piece && <div className="w-4/5 h-4/5">...</div>}When piece is missing:
✅ no content
✅ no height
❌ grid cell collapses
This works, but feels more of a workaround:
<div className="grid grid-cols-8 w-full aspect-square">This forces the board container to stay square, which prevents collapse,
but does not solve the root issue per grid cell.
Is it correct that CSS Grid items collapse to height 0 if they are empty?
What is the cleanest / best-practice solution?
aspect-square per cell?
min-height?
padding trick?
CSS Grid auto-rows?
What is the proper CSS approach for fixed square grid layouts like chessboards?
How do I enforce equal square sizes without relying on inner content?
