Documentation for cols property

[SugariuClaudiu]

It seems that cols is of the type [number, number][], where the first number is the 'preferred' width and the latter is the column index(id).

The documentation is very confusing, as the grid helper already provides height and width configuration.

Could someone please explain the correct usage of the first term ?

[yoh-extradat]

Took me a while to figure it out, too!

1. The first number defines a break point in pixels, and the second a number of columns to be displayed if the parent elements width >= the specified break point.

const columns = [
    [0,1],  // Display 1 Column 
    [500,2], // Display 2 Columns if parent width is >= 500px 
    [1024,3], // Display 3 Columns if parent width is >= 1024px
    [1500,5] // Display 5 Columns if parent width is >= 1500px
]

if only one definition [x,y] is provided, x will be ignored and the column count is always y

2. Items need to provide representations for all possible counts of columns. In this case 1,2,3 and 5

const items = [
{
    1: item({ x: 0, y: 2, w: 1, h: 2 }),  // Item hight, width, position, etc for 1 column or parent width is < 500px
    2: item({ x: 0, y: 2, w: 1, h: 2 }), // Item hight, width, position, etc for 1 column or parent width is >= 500px
    3: item({ x: 0, y: 2, w: 1, h: 2 }), // Item hight, width, position, etc for 1 column or parent width is >= 1024px
    5: item({ x: 0, y: 2, w: 1, h: 2 }), // Item hight, width, position, etc for 1 column or parent width is >= 1500px
    
}
]

[joakim]

This was really confusing, thanks for explaining it!

Items need to provide representations for all possible counts of columns. In this case 1,2,3 and 5

That's not very elegant…