I am currently working on developing a sudoku solver using ReactJS as a way to improve my skills in the framework. Each square in the grid can either have a single number (classified as 'filled') or up to 9 'notes' that indicate possible numbers for that square.
One issue I am facing is that when a filled square is next to a notes square, the notes squares seem to shift downwards, aligning the first line of their baseline with that of the filled square digit. Ideally, I would like these squares to remain fixed in relation to each other regardless of their content.
My layout is utilizing flexbox for positioning elements.
Despite my efforts to adjust the CSS properties, I cannot figure out why this shifting behavior is occurring. I have tried various modifications but none seem to make a difference.
Below is the structure of the HTML:
<div class='board'>
<div class='board-row'>
<div class='square'>
<div class='number filled'>9</div>
</div>
<div class='square'>
<div class='note'>1</div>
<div class='note'>2</div>
<div class='note'>3</div>
<div class='note'>4</div>
<div class='note'>5</div>
<div class='note'>6</div>
<div class='note'>7</div>
<div class='note'>8</div>
</div>
<div class='square'>
<div class='note'>1</div>
...
</div>
...
</div>
...
</div>
relevant CSS code:
body {
font-family: "helvetica";
font-size: 16px;
}
.board {
display: flex;
flex-direction: column;
font-family: monospace;
}
.board-row {
flex-direction: row;
}
.square {
height: 3em;
width: 3em;
border: 1px solid black;
align-items: center;
justify-content: center;
flex-wrap: wrap;
display: inline-flex;
}
.square .filled {
font-size: 2rem;
background-color: #CC0;
}
.square .note {
padding-left: 3px;
padding-right: 3px;
}
Here is a snapshot of the issue (red borders highlight the notes - containing ' ')
For image reference, follow this link: https://i.sstatic.net/ohVyw.jpg
The objective is to maintain alignment of the black-bordered squares within a grid layout.