什么是正确的选择器来改变extjs网格中两行之间的间距？
当模板列中的行内容高度不同时，行之间会出现一些额外的空间。
如何使行与行之间的实际空间相同？我一直在inspector中寻找合适的选择器来选择额外的空间，但我没有找到。

var store = Ext.create('Ext.data.Store', {
    fields: [
    {
        name: 'name1',
        type: 'string'
    }, {
        name: 'name2',
        type: 'string'
    }],

    data: [
        {
            name1: 'John',
            name2: 'Smith',
        },
        {
            name1: '',
            name2: '',
        },
        {
            name1: 'Homer',
            name2: 'Simson',
        },        
    ],
});

Ext.create('Ext.Container', {
    renderTo: Ext.getBody(),
    height: 700,
    items: [
        {
            xtype: 'grid',
            cls: 'grid',
            //rowLines: false,
            height: 700,
            store: store,
            columns: [
                {
                        text: '',
                        xtype: 'templatecolumn',
                        cell: {
                            encodeHtml: false
                        },              
                        tpl: new Ext.XTemplate(
                            '<div class="grid-box">',
                            '<div class="name">{name1}</div>',
                            '<div class="name">{name2}</div>',
                            '</div>',
                        ),
                        flex: 1
                }
            ]
        }
    ]
});

CSS系统

.grid .x-show-selection > .x-listitem.x-selected {
    background-color: pink;
}

.grid .x-show-selection > .x-listitem.x-selected {
    background-color: pink;
}

.grid .x-listitem {
    background-color: #a9f1ad;
}

.grid-box {
    background: #fff;
    border: 1px solid #cbd2d6;
    padding: 15px;
    height: 100%;
}

.grid .x-gridcell-body-el {
    padding: 5px 0px 5px 10px;
}

.name {
    font-size:22px;
    line-height:22px;
}