首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何使用 CSS Grid 布局 IOS11 新的控制中心

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

作者头像
IMWeb前端团队
发布2019-12-04 09:56:46
9430
发布2019-12-04 09:56:46
举报
文章被收录于专栏: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;
}

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-09-21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 设计拆分网格
  • Grid 布局
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档