移动网格应用首页

Question

我正在尝试在html中构建一个移动应用程序，它将具有应用程序样式菜单系统，标题下方的3x3网格，其中均匀间隔的按钮带有图标。

我的网格有点工作，但我似乎无法获得项目之间的任何余量（需要明确定义的区域）。我发现难以理解的是它必须在任何设备上正确扩展。

以下代码产生了这个：

部分存在，但是我希望它看起来像什么; （原则是画得不好的线条，它们应该基本上是允许背景显示之间的空格）。

继承我的代码：

* {
    margin:0;
    padding:0;
}
ul {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    counter-reset:image;
}
li {
    background: #f0f0f0;
    background-size:cover;
    width:33%;
    height:33%;
    top:33%;
    list-style:none;
    margin: 10px;
    position:absolute;
}
s
li:nth-child(-n+3) {
    top:0;
}
li:nth-child(n+7) {
    top:66%;
}
li:nth-child(3n+2) {
    left:33%;
}
li:nth-child(3n+3) {
    left:66%;
}

<div style="height:60%; margin: 20px">
 <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</div>