CODEWITHSUNDEEP
reactjsgridreact-grid-layout
Paul
Paul

Reputation: 271

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

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.

Upvotes: 0

Views: 5080

Answers (1)

Nacho Justicia Ramos
Nacho Justicia Ramos

Reputation: 9721

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.

Upvotes: 4

Related Questions