Flex-A-Sketch: Having some rounding/overflow issues using flexbox


#1

Hi folks, looking for a little advice on the etch a sketch project. Most of the solutions I peaked at used css grids, but I’ve been taking a crack at it using flexbox. I haven’t implemented the actual hover listeners quite yet, but I’ve been having some issues with squares overflowing to the next line above a certain threshold (for me it gets dicey after 33.)

live site: https://chris-mahmood.github.io/etch-a-sketch/

After looking through some similar threads I decided to truncate the size formula which helped with lower numbers like 7, 11, 16, etc, but it would be nice to be able to use more squares without things getting weird. Any advice?

UPDATE 8/30 Turns out I messed some calculations up with borders. I decided to go back and add a border image and it broke everything. After some poking around setting my generated divs to box-sizing: border-box; fixed everything. For the time being I’m going to stick with static sizing, as I can’t seem to properly manipulate the div size based on the parent element’s size if said parent is set as a percentage.


#2

The squares are overflowing because they are just sliiiiightly taller than they are wide, so all the divs won’t fit in a neat square. Try making it so the height and width are exactly the same, and don’t forget to account for the 1px top and left borders, since borders add to the size of an element.

Also, since you’re using flex-wrap, the height and width of your squares need to be exactly grid_width / num_squares. So the truncation is working against you in this case.

I think it will be easier for you to get the correct result if you create separate divs for each row. That way you’re not relying on css to find where your breakpoints are.


#3

Thanks, I think I’m a lot closer now. I’ve managed to fix the overflowing and have the grid show up properly for the most part (at values over 50 or so there’s an occasional 1px white gap between rows.) I think I’m going to work on the rest of the functionality first, then possibly return and try to make the layout responsive by changing the manual height/width to something percentage based… Seems like it might be a better way of going about it instead of using arbitrary sizes.

For your last point, do you mean doing it in a loop? So it would go something like: User sets row amount x -> break the main box into x equal rows -> loop divides the width each of those divs by x again? That sounds like it would take some of the guesswork out of it.


#4

No problem!

With regard to the last part, I had meant structuring your grid more like a 2D array - So if the user wants a 4x4 grid, you create a grid element which contains 4 row elements, each of which contain 4 cells.

That said, I had another look at your project, and looks like you got everything sorted out! Looks great, well done


#5

Ah I see. That could work.

Thank you! It’s mostly sorted, there’s still a few odd values where it overflows, I feel like it might be rounding up to some decimal place breaking it, so I might just make the usable area a pixel smaller and accept a little white space around the edges.