react-grid-layout: rowHeight calculate error!

var layouts = {
            lg: [
                {i: '1', x: 0, y: 0, w: 1, h: 2},
                {i: '2', x: 1, y: 0, w: 1, h: 1},
                {i: '3', x: 2, y: 0, w: 1, h: 1}
            ]
        };
        return (
            <ResponsiveReactGridLayout className="layout" rowHeight={10} margin={[10,10]} layouts={layouts}
                breakpoints={{lg: 1200}}
                cols={{lg: 12}}>
                <div className="rcBlock" key={"1"} style={{height:20}}>1</div>
                <div className="rcBlock" key={"2"}>2</div>
                <div className="rcBlock" key={"3"}>3</div>
            </ResponsiveReactGridLayout>
        )

Hi, i have a question, i run this code, i thought the (div of key=1)'s height should be 20px, but whatever i resize the (div of key=1), the (div of key=1)'s height cannot be set to 20px ,the mini size is 30px, even i set the height style, the (div of key=1) cannot be set to 20px, why???can anybody help me? thanks very much!!!

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 17

Commits related to this issue

docs(README): add section on margin and rowHeight / column width. See #233, #523, #605, #628, #800, #816, #978, #1281, #1432, #1450, and many others. — committed to react-grid-layout/react-grid-layout by STRML a year ago

Most upvoted comments

height is equal to h * rowHeight + (h - 1) * margin This should be written in documentation to save debugging time.

justdvl on Jun 3, 2021

You can’t. It’s a grid, in order for items to be swappable between rows, all the rows need to be the same height.

STRML on Aug 3, 2021

Please see above. There is no other way it could be: height is equal to h * rowHeight + (h - 1) * margin. It is intentional design such that the grid lines up, and other grid libraries work the same way.

If you’re like me and you know the actual height in px but you need the calculated h value for setting an item to the height equivalent of the full grid you can use.

h = (y + m) / (r + m)

with y being the height of the grid in px.

JohnGrisham on Mar 11, 2021

Please see above. There is no other way it could be: height is equal to h * rowHeight + (h - 1) * margin. It is intentional design such that the grid lines up, and other grid libraries work the same way.

If you’re like me and you know the actual height in px but you need the calculated h value for setting an item to the height equivalent of the full grid you can use.

h = (y + m) / (r + m)

with y being the height of the grid in px.

@JohnGrisham You’re correct that the formula needs to be adjusted to account for margins. Given y as the height of the grid in pixels, the formula for calculating the grid item height h should be:

h = (y + m) / (r + m)

Where y is the height of the grid in pixels, m is the vertical margin, and r is the row height.

However, the correct formula should consider subtracting the two outer margins as well. Therefore, the new formula becomes

h = (y -2m + m) / (r + m) = (y - m) / (r + m)

This formula subtracts the vertical margin m from the height of the grid y to account for the outer margins, and then divides the result by the sum of the row height r and the vertical margin m.

Using this corrected formula, you can calculate the grid item height h to set an item to the height equivalent of the full grid.

jadghadry on Mar 18, 2023

@STRML It is a bit difficult for me to understand why react-grid-layout computes the height of a grid item this way, and I think the same goes for other people who first approach to this library. Could you please explain why e.g. the height of a grid item with h: 3 when rowHeight={120} isn’t just 120 * 3 = 360px? Anyway, thank you for this library! 😃

tonix-tuft on Dec 28, 2019

Please see above. There is no other way it could be: height is equal to h * rowHeight + (h - 1) * margin. It is intentional design such that the grid lines up, and other grid libraries work the same way.

STRML on Aug 3, 2017

I’m not… but the library doesn’t calculate the container height correctly… Create a grid with the margin set to [10,10] and the rowHeight set to 10. Then create an item where the h is set to 5. Inspect the height of the actual element, it will be set to 90px.

What happens with margin: [10,10]:

What I expected:

For the second image I set the margin of the child div to 5px containerPadding: 5 and margin: [0,0], that essentially gives me the margin I’m looking for, the h becomes 7 instead of 5 but the user can adjust the layout as they see fit.

simianhacker on Nov 23, 2016