昨天 IOS11 就可以开始安装更新了，下图就是它带来的新的控制中心界面，是不是有点像带圆角的 Win10 风格？
设计的相互借鉴这里就不展开了，下面我们直接开局。
设计拆分网格
我们先来根据效果图拆格子，如下图，红线表示水平线，白线表示垂直线，这样就构成了我们的 4*4 的网格系统
当然按道理 4*4 的网格系统应该生成 16 个单元格，但是因为我们有格子的合并，所以一般来说格子小于或等于网格系统应该生成的个数。这里我们的单元格是 11 个，如下图：
Grid 布局
拆分完了，我们就正式开始写代码。
首先是我们的 HTML 元素，11 个 grid item：
代码语言：javascript复制.function-list
.function-item * 11接下来就是我们的重点 CSS 布局了，代码如下：
代码语言：javascript复制.function-list {
display: grid;
/* 定义行列 */
grid-template-columns: 44px 44px 44px 44px;
grid-template-rows: 98px 44px 44px 44px;
justify-content: center;
/* 定义间距 */
grid-gap: 10px;
}
.function-item {
background: rgba(0,0,0,.7);
border-radius: 8px;
/* 其他辅助样式 */
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
/* 1 和 7 跨两列 */
.function-item:nth-of-type(1),
.function-item:nth-of-type(7){
grid-column: 1 / 3;
}
/* 2 跨两列 */
.function-item:nth-of-type(2) {
grid-column: 3 / 5;
}
/* 5 跨两行 */
.function-item:nth-of-type(5) {
grid-column: 3 / 4;
grid-row: 2 / 4;
}最终效果如下图（尺寸大小方面不一致，但思想大概如是）：
