I am trying to render a gridpanel in viewport with center aligned.

If I hard coded grid with to 350px and then applying locking on a column, the grid alignment remains intact in center for locked and normal grid as well

Ext.create('Ext.container.Viewport', {
    layout: {
            type: 'fit',
            align: 'center',
            pack: 'center'
    items: [{
        xtype: 'grid',
        id: 'grid',
        width: 350}]});

But in my case I cant use grid fixed width as column are dynamic and can reach upto 20-25 columns, so removed the width config and used below css to make it center align in viewport.

.x-grid-table {
    margin: 0 auto !important;
    position: relative !important;
    border:1px solid grey;
.x-box-inner {
    background-color: transparent !important;
    margin: 0 auto;
It worked for me but when applying locking now, locked grid totally shift to left. It should stick to normal grid as we have in upper case.You can see below that locking produce a wide gap between locked and normal grid which looks ugly on large screen.


Please guide me what other config I should use to make it work.
below is the fiddle