前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Grid 布局写法示例

Grid 布局写法示例

作者头像
前端GoGoGo
发布2018-08-24 16:19:25
6010
发布2018-08-24 16:19:25
举报

Grid 可以简便、完整、响应式地实现各种页面布局。它比 Flex 布局功能更强大。

Grid 布局是一个实验特性,目前移动浏览器都不支持该特性。在 Chrome 中使用该特性需要在 chrome://flags 中启用 #enable-experimental-web-platform-features

多个元素在一行

HTML

代码语言:javascript
复制
<div class="ly">
  <div class="ly__item">xxx</div>
  <div class="ly__item">xxx</div>
  <div class="ly__item">xxx</div>
</div>

CSS

代码语言:javascript
复制
.ly {
    display: grid;
    grid-template-columns: 50px 50px 50px;/* 这边以 3 列为例,每列宽 50px */
}

多个元素水平居中对齐

代码语言:javascript
复制
.ly {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  justify-content: center;
}

多个元素水平两端对齐

代码语言:javascript
复制
.ly {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  justify-content: space-between;
}

多行多个元素水平两端对齐

代码语言:javascript
复制
.ly {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 50px 50px 50px; /* 这边以 3 行为例 */
  justify-content: space-between;
}

多个元素在一行,某个元素占据剩余部分

代码语言:javascript
复制
.ly {
  display: grid;
  grid-template-columns: 50px 50px 1fr; /* 这边以最后一个元素占剩余部分为例 */
}

多个元素水平居右对齐

代码语言:javascript
复制
.ly {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  justify-content: end;
}

多个元素垂直居中

代码语言:javascript
复制
.ly {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  align-items: center;
}

多个元素水平垂直居中对齐

代码语言:javascript
复制
.ly {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  justify-content: center;
  align-items: center;
}

更多关于 Grid 的内容见这里

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 多个元素在一行
  • 多个元素水平居中对齐
  • 多个元素水平两端对齐
  • 多行多个元素水平两端对齐
  • 多个元素在一行,某个元素占据剩余部分
  • 多个元素水平居右对齐
  • 多个元素垂直居中
  • 多个元素水平垂直居中对齐
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档