使用grid来进行常见布局

使用grid来进行常见布局

grid 布局是W3C提出的一个二维布局系统,通过 display: grid 来设置使用,对于以前一些复杂的布局能够得到更简单的解决。本篇文章通过几个布局来对对 grid 布局进行一个简单的了解。目前,grid 仅仅只有 Edge使用前缀能够支持,为了更好地体验,可以使用 Chrome 浏览器,在 chrome://flags 开启 # enable-experimental-web-platform-features 选项。
另外,更多的例子可以前往 Grid by examples, 更多的用法可以前往 W3 Specification,也可以前往 A Complete Guide to Grid

Live Demo

左右固定中间自适应

以前,这需要使用 negative margin,float, position 解决,圣杯布局是一个比较好的解决方案。后来,flex横空出世,使用 flex-grow 与 flex-basis 完成自适应布局。grid 布局相比 flex 布局更加简单,只需要在 container 上设置 grid-template-columns: 100px auto 100px。

.container {
display: grid;
grid-template-columns: 100px auto 200px;
}

三等分

以前的方法可以设置 float: left; width: 33.33333333,使用 flex 可以设置 flex-basis: 33.33333333。在 grid 中只需要设置 grid-template-columns: 1fr 1fr 1fr

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
height: 100px;
background-color: # feb;
}

三七分

在 grid 中设置 container 为十等分,可以使用 grid-template-columns: repeat(10, 1fr)。
repeat 为重复10次 1fr。grid-column 为 grid-column-start 与 grid-column-end 的缩写,表示起止的 line。使用 grid 进行栅格系统的布局也是很简单。

.container {
display: grid;
grid-template-columns: repeat(10, 1fr);
}

.column-3 {
grid-column: 1 / 4;
}

.column-7 {
grid-column: 4 / 11;
}

复杂布局

以上几个例子,均是单向布局,flex 就能很好的解决,而如下几个布局,均是二维布局,传统布局有些困难。以下示例图,可以在 container 上使用 grid-template-areas,在 item 上设置 grid-area 属性来设置复杂布局。

header
left
main
right
footer

.container {
display: grid;
grid-template-columns: 100px auto 100px;
grid-template-rows: 40px 300px 50px;
grid-template-areas: "header header header"
"left main right"
"footer footer footer";
}

.container .header {
grid-area: header;
}

.container .footer {
grid-area: footer;
}

.container .left {
grid-area: left;
}

.container .right {
grid-area: right;
}

.container .main {
grid-area: main;
}

九宫格

在传统布局中就比较有困难。在 grid 中设置三行三列等宽,并使用 grid-gap 设置间隙。

.container {
width: 300px;
height: 300px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 8px;
border: 1px solid # fac;
padding: 8px;
}

参考

  1. A Complete Guide to Grid

  2. W3 Specification

  3. Grid by examples

  4. caniuse

  5. Grid polyfill

关键字:css3

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部