It seems that cols is of the type [number, number][], where the first number is the 'p

Took me a while to figure it out, too! The first number define

Documentation for cols property about svelte-grid HOT 2 OPEN

SugariuClaudiu commented on June 26, 2024

Documentation for cols property

from svelte-grid.

Comments (2)

yoh-extradat commented on June 26, 2024 6

Took me a while to figure it out, too!

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

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
    
}
]