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
8 Replies
this probably has to do with rounding. with so many columns, the width of each probably doesnt round to a full pixel.
Is there a way to fix this, or other option would be to go with flex box?
instead of max-content, you can set it to 10px and have a grid-auto-rows of 10px. then you don't need it on the boxes
https://codepen.io/MarkBoots/pen/oNOMjzY
This is working in codesandbox, but idk whats happening in my local system. maybe i need to resetup my project again
maybe the content is exceeding the size of the box? insepect element
It was vite issue, idk what specifically, but when i create a new vite app the issue was still there but when i changed to create-react-app , it went away
Oh no, sorry it wasnt vite or CRA's issue. the grip gap is uneven in firefox, but it renders fine in chrome and other browser
if it's just a Firefox issue maybe the new
round() function can help?: https://developer.mozilla.org/en-US/docs/Web/CSS/roundMDN Web Docs
round() - CSS: Cascading Style Sheets | MDN
The round() CSS function returns a rounded number based on a selected rounding strategy.
I don't know your use case, but, if you are not putting any contents in the grid boxes, you might consider doing this with a linear-gradient background.