React-Grid-Layout x,y,w,h

4.3k Views Asked by At

Good day,

I want to change the position of a react grid layout but there's one thing which I do not understand React-Grid-Layout x,y,w,h, especially the x,y part. I know that w is for width, h is for height. I have done css grid and I am not sure this React-Grid-Layout works the same as the css one.

Please help.

1

There are 1 best solutions below

0
On

As you can read in the documentation of react-grid-layout library, the Grid Item props x, y, w, h and also minW, maxW, minH, maxH are in grid units (not in pixels). Then, what you have to do is to define the number of columns using cols property, the row height in pixels with rowHeight and the width in pixels of the whole grid.

So, by combining these three properties (cols, rowHeight and width) of the GridLayout component you should get a grid and you would just work with grid units always.