In my project, I have set up a grid with 24 rows and 64 columns, totaling to 24x64 nodes. However, I am facing an issue where the nodes overlap when I open the console window.
I am looking for a solution to automatically resize all nodes based on changes in the window size. Can anyone provide assistance?
grid.jsx
const Grid = ({ grid }) => {
return (
<div className="grid">
{grid.map((row, rowIdx) => {
return (
<div className="cur-row" key={rowIdx}>
{row.map((node) => (
<Node node={node} />
))}
</div>
);
})}
</div>
);
};
node.jsx
const Node = ({ node }) => {
return (
<div className="node"></div>
);
};
css file
.grid {
overflow: hidden;
position: absolute;
left: 20px;
align-content: flex-start;
justify-content: center;
margin-top: 50px;
}
.cur-row {
height: 23px;
}
.node {
width: 23px;
height: 23px;
border: 1px solid rgb(175, 216, 248);
display: inline-block;
}
Here is the grid when running the app:
And here is the grid when opening the console window: Some nodes are visibly overlapping with one another in the latter scenario.
I need a solution that will dynamically adjust the node sizes based on the window dimensions. Can someone provide guidance?