dxResponsiveBox API

by tabalinas

HTML

<div data-bind="dxLayout: { 
    rows: [
        {ratio: 1, base-size: 100, screen: 'md xs sm'},
        {ratio: 2, base-size: 100}
    ], 
    cols: [
        {ratio: 1, base-size: 100}, 
        {ratio: 2, base-size: 100, screen: 'xl'}
    ]
}">
    <div data-options="dxItem: { position: [{ row: 1, column: 2, colspan: 2, rowspan: 3, screen: 'xl' }] }"></div>
    <div data-options="dxItem: {}"></div>
    <div data-options="dxItem: {}"></div>
    <div data-options="dxItem: {}"></div>
    <div data-options="dxItem: {}"></div>
</div>

<!----------Flex grid----------->

<div data-bind="dxResponsiveBox: { 
    rows: [
        { },
        { },
        { screen: 'xs' }
    ], 
    columns: [ 
        { ratio: 2 },
        { ratio: 1, screen 'sm md lg xl' },
    ]}">
    <div data-options="dxItem: { position: [
        { row: 0, column: 0, screen: 'xs' },
        { row: 0, column: 0, colspan: 2 }
    ]}"></div>
    <div data-options="dxItem: { position: 
        { row: 1, column: 0 } 
    }"></div>
    <div data-options="dxItem: { position: [
        { row: 2, column: 0, screen: 'xs'},
        { row: 1, column: 1 }
    ]}"></div>
</div>


<!----------Flex grid (fixed width) ----------->

<div data-bind="dxLayout: { 
    rows: [
        { },
        { },
        { screen: 'xs' }
    ], 
    cols: [ 
        { baseSize: 300, screen: 'sm' },
        { ratio: 1, screen: 'md xl lg' },
        { ratio: 1 }        
    ]}">
    <div data-options="dxItem: { position: [
        { row: 0, column: 0, screen: 'xs' },
        { row: 0, column: 0, colspan: 2 }
    ]}"></div>
    <div data-options="dxItem: { position: 
        { row: 1, column: 0 } 
    }"></div>
    <div data-options="dxItem: { position: [
        { row: 2, column: 0, screen: 'xs'},
        { row: 1, column: 1 }
    ]}"></div>
</div>