结一

2017-09-21 08:40

如何使用 CSS Grid 布局 IOS11 新的控制中心

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载

昨天 IOS11 就可以开始安装更新了,下图就是它带来的新的控制中心界面,是不是有点像带圆角的 Win10 风格?

设计的相互借鉴这里就不展开了,下面我们直接开局。

设计拆分网格

我们先来根据效果图拆格子,如下图,红线表示水平线,白线表示垂直线,这样就构成了我们的 4*4 的网格系统

当然按道理 4*4 的网格系统应该生成 16 个单元格,但是因为我们有格子的合并,所以一般来说格子小于或等于网格系统应该生成的个数。这里我们的单元格是 11 个,如下图:

Grid 布局

拆分完了,我们就正式开始写代码。

首先是我们的 HTML 元素,11 个 grid item:

.function-list
  .function-item * 11

接下来就是我们的重点 CSS 布局了,代码如下:

.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;
}

最终效果如下图(尺寸大小方面不一致,但思想大概如是):

附赠:在线 DEMO

PS:感觉以后的控制中心都是要走上这种网格风格了,CSS Grid 就派上用场了。

0条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。