We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
grid 布局是CSS新增的一个二维布局,可以将页面分割成不同的空间, 通过 display:grid来设置使用,此时元素将自动变成网格容器。 似乎目前grid布局仍处于草案阶段。浏览器支持比较有限,仅在IE10+上支持,而且也仅支持部分属性。不过我们学习了解一下倒无防。
一般来说,实现一种布局特性我们会有很多种方法,比如如果实现一些自适应可伸缩的布局,稍微麻烦点的可以用 float ,position, margin等属性解决, 后来 flex布局的出现让这个问题得到了更加简单的解决,但flex布局解决的是单向一维度的排列。但对于二维的布局只能通过多个flex布局嵌套实现, 而grid本身就是一个二维布局,实现起来就相当简单。 说到grid布局, 同时会让人想到table 布局,二者都很简单的实现了二维层面的布局,但grid布局区别于table的一个地方是它可以很简单的实现响应式布局。 总之,grid 布局的出现一大好处就是化繁为简,能够让一些比较复杂的页面布局得到很简单的解决。
下面对Grid Layout的使用方法简单介绍下
首先在grid item外的父级容器上定义display: grid
<div style="display: grid"> <div>grid item</div> ... ... </div>
grid lines – 是横向和纵向划分grid的线,它可以一朝数字顺序被指定,也可以用用户制定的名字被指定。 grid tracks – 指的是一个grid列或者行之前的区域,换而言之是两个相邻的grid lines之前的空间。 grid cells – 一个grid cell指的是grid中最小的单位。 grid areas – 是用来展现一个或多个grid item的逻辑空间。它被四条grid line包围。
这四个属性中,grid-column-start和grid-row-start指明区域起始线,grid-column-end和grid-row-end指明区域结束线。这四个属性均有以下四个值可取。
除以上提到,grid还拥有更多的属性,使之可以定义grid item的宽高,间隙,内部自适应的方式,对齐方式等等。更多属性可以参考W3C文档。
经典圣杯布局(header- left, main, right- footer) 用grid实现如下:
<div class="grid-layout"> <div class="header">header</div> <div class="left">left</div> <div class="main">main</div> <div class="right">right</div> <div class="footer">footer</div> </div>
.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; }
The text was updated successfully, but these errors were encountered:
No branches or pull requests
What
grid 布局是CSS新增的一个二维布局,可以将页面分割成不同的空间, 通过 display:grid来设置使用,此时元素将自动变成网格容器。 似乎目前grid布局仍处于草案阶段。浏览器支持比较有限,仅在IE10+上支持,而且也仅支持部分属性。不过我们学习了解一下倒无防。
Why
一般来说,实现一种布局特性我们会有很多种方法,比如如果实现一些自适应可伸缩的布局,稍微麻烦点的可以用 float ,position, margin等属性解决, 后来 flex布局的出现让这个问题得到了更加简单的解决,但flex布局解决的是单向一维度的排列。但对于二维的布局只能通过多个flex布局嵌套实现, 而grid本身就是一个二维布局,实现起来就相当简单。
说到grid布局, 同时会让人想到table 布局,二者都很简单的实现了二维层面的布局,但grid布局区别于table的一个地方是它可以很简单的实现响应式布局。
总之,grid 布局的出现一大好处就是化繁为简,能够让一些比较复杂的页面布局得到很简单的解决。
How
下面对Grid Layout的使用方法简单介绍下
定义grid:
首先在grid item外的父级容器上定义display: grid
相关概念
grid lines – 是横向和纵向划分grid的线,它可以一朝数字顺序被指定,也可以用用户制定的名字被指定。
grid tracks – 指的是一个grid列或者行之前的区域,换而言之是两个相邻的grid lines之前的空间。
grid cells – 一个grid cell指的是grid中最小的单位。
grid areas – 是用来展现一个或多个grid item的逻辑空间。它被四条grid line包围。
grid item 属性
这四个属性中,grid-column-start和grid-row-start指明区域起始线,grid-column-end和grid-row-end指明区域结束线。这四个属性均有以下四个值可取。
除以上提到,grid还拥有更多的属性,使之可以定义grid item的宽高,间隙,内部自适应的方式,对齐方式等等。更多属性可以参考W3C文档。
example
经典圣杯布局(header- left, main, right- footer) 用grid实现如下:
The text was updated successfully, but these errors were encountered: