Grid gap having uneven gaps

So this is this grid wrapper:
<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
image.png
Was this page helpful?