Fix grid item width and height calculation for correct spacing - Githubissues

cuire / svelte-grid-extended

A draggable and resizable grid layout, for Svelte

https://svelte-grid-extended.vercel.app

MIT License

74 stars 8 forks source link

Fix grid item width and height calculation for correct spacing #82

Closed gitryder closed 2 months ago

gitryder commented 2 months ago

This PR

Addresses a bug in the library where the calculation of grid item width and height results in extra space on the right and bottom sides of the grid when the grid cols or grid rows values differ from the grid gap value. 
Closes #81

Problem:

The current formula used to calculate grid item width and height is incorrect:

Width: (width - (gap + 1) times cols) / cols
Height: (height - (gap + 1) times rows) / rows This formula mistakenly assumes the total width or height occupied by gaps is (gap + 1) times cols for width and (gap + 1) times rows for height, which is incorrect. The correct formula should consider the total number of gaps, which is (cols + 1) for width and (rows + 1) for height.

Solution:

The formulas have been updated to correctly calculate the width and height of grid items:

Corrected Width: (width - (cols + 1) times gap) / cols
Corrected Height: (height - (rows + 1) times gap) / rows

vercel[bot] commented 2 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
svelte-grid-extended-bwyl	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 30, 2024 7:07pm