Grid gap having uneven gaps
So this is this grid wrapper:
here is each box element jsx: (boxelements is nothing but array of these :
display: grid;
grid-template-columns: repeat(53, max-content);
gap: 2px 2px;
}
.box {
width: 10px;
height: 10px;
background-color: white;
}`
idk what is causing this, any help would be appreciated
<div className={styles.boxWrapper}>
{boxElements && boxElements.map((box) => box)}
</div>here is each box element jsx: (boxelements is nothing but array of these :
<div key={index} className={${styles.box} ${boxClass}} /> )
css:
.boxWrapper {display: grid;
grid-template-columns: repeat(53, max-content);
gap: 2px 2px;
}
.box {
width: 10px;
height: 10px;
background-color: white;
}`
idk what is causing this, any help would be appreciated

