jQuery移动网格看起来像app主屏幕

Question

我正在尝试为jQuery移动应用构建响应式布局。这个想法是让它看起来有点像iphone主页，图标有点扭曲，网格应该是2 x 4（一行重叠整个宽度）

我有它所以它显示网格很好，但我无法弄清楚如何使用CSS来全屏。这适用于Android / iPhone Phonegap应用程序，因此设备将是全屏和不同尺寸（因此不能使用固定尺寸）

  <div class="ui-grid-a" style="height:33%;" >
                <div class="ui-block-a"><div class="ui-bar ui-bar-e"><a href="#" class="ui-btn">Alerts</a></div></div>
                <div class="ui-block-b"><div class="ui-bar ui-bar-e"><a href="#addpet" class="ui-btn">Add Pet</a></div></div>
            </div>
            <div class="ui-grid-a" style="height:33%;" >
                <div class="ui-block-a"><div class="ui-bar ui-bar-e"><a href="#listpets" class="ui-btn">Manage Pet</a></div></div>
                <div class="ui-block-b"><div class="ui-bar ui-bar-e" ><a href="#latlong" class="ui-btn">Manage Profile</a></div></div>
            </div>
            <div  style="height:33%" ><a href="#" class="ui-btn">Lost Pet</a></div></div>
        <div class="ui-grid-a" style="height:33%;" >
            <div class="ui-block-a"><div class="ui-bar ui-bar-e"><a href="#" class="ui-btn">News Feed</a></div></div>
            <div class="ui-block-b"><div class="ui-bar ui-bar-e"><a href="#" class="ui-btn">Mange Lost Pets</a></div></div>

        </div>

以上是我所拥有的在某种程度上有效但它不会在屏幕上自动向下空间，直到顶部。

以下是它现在提出的内容：

这就是我想要实现的目标（非常粗略，很快就会将按钮换成图标）