以下是来自 Oliver Williams 的帖子。 Oliver 已经学习了相当长时间的原生 CSS 网格,可以说是在 CSS 网格方面有一定的发言权。在这篇文章中,他将以非同寻常的思路分析自己的 CSS 网格布局学习之路。我比较赞同他的想法,就是学习一门新技术的时候,把它们拆分成比较小的单元块并配上实例,一步一步的学习。这比直接学习网格布局的所有东西要好太多了。
浏览器原生 CSS 网格预计会在 2017 年年初得到支持。 在这之前你需要在浏览器中开启这个实验性的功能 (Firefox 实验版默认是开启的)。 是当前最好的实现。 同时,火狐有一个非常好的插件叫 CSS Grid Inspector, 它能显示出网格的线,它是目前唯一可以在浏览器中运行的此类工具。
在 chrome 的地址栏中输入
, 找到 '实验性网络平台功能' 并开启它。 IE 和 Edge 实现的是一个比较老的网格标准,现在并不受支持。
- chrome://flags
相信我,很快你就能掌握它的.
网格布局只能像左边那样,以矩形的单元块组合起来。并不能像右图那样,由一堆零散的多边形(跟俄罗斯方块那样的块)拼凑。
虽然网格布局和弹性盒在某些方面起到相似的作用,而且你可以发现,很多人用弹性盒来实现网格布局,但这并不是设计弹性盒的初衷。Jake Archibald 的这篇博文值得一读 。
这篇博文大概的意思是:
Rachel Andrews 也 :
Flexbox(弹性盒)用于一维布局 —— 也就是行或者列. 网格用于二维布局 —— 也就是多行多列.
它们可以很好的结合,你可以往弹性容器中放入网格,也可以在网格块中加入 flex 元素
来看个例子吧。 我们想在一个网格元素(grid item)里垂直居中一段文字, 但我们想要让背景(图片,颜色或渐变)覆盖整个的网格区域。 我们可以使用
属性,并把它的值设为
- align-items
,但是如果这样背景并不会填满整个网格元素的区域。
- center
默认的值是
- align-items
- 你不改变它,始终会填满整个空间的。我们把网格元素设为
- stretch
并把网格元素(grid item)设置为一个弹性容器(flex container)。
- align-items:center
- .grid {
- align - items: stretch;
- }.griditem {
- display: flex;
- align - items: center;
- }
在小屏幕下,写一个
列的网格,所有格子的跨度都
- 12
列。
- 12
你可以用网格这样做:
- /* For small screens */
- .span4,
- .span6,
- .spanAll {
- grid - column - end: span 12;
- }
- /* For large screens */
- @media(min - width: 650px) {.span4 {
- grid - column - end: span 4;
- }.span6 {
- grid - column - end: span 6;
- }
- }
这样的显示效果是没什么错误的,当使用 CSS 网格,重新定义列数非常简单。并且你可以通过设置
来让你的页面始终是从左到右贯穿的。
- grid-column-end: -1;
- /* For small screens */
- .span4,
- .span6,
- .spanAll {
- grid - column - end: -1;
- }
在大屏幕上,你想要尽可能的接近
列,但是在移动端,一行大概是
- 12
列。用
- 1~4
来改变
- media
是非常容易的。
- grid-template-columns
- .grid {
- grid - template - columns: 1fr 1fr;
- }@media(min - width: 700px) {.grid {
- grid - template - columns: repeat(12, 1fr);
- }
- }
有一些元素,我们想让它贯穿整个视口,比如像
,
- header
,和一些大图啥的。
- footer
对于小屏幕,我们可以这样写:
- .wide {
- grid - column: 1 / 3;
- /* start at 1, end at 3 */
- }
不幸的是,当我们换到大屏的时候,一行
列,这些元素将仅仅占满前两列,并不会占满
- 12
列,我们需要定义新的
- 12
,并且把他的值设为
- grid-column-end
. 这种方式比较麻烦,还有一种简单的方式,
- 13
,这样不论在什么屏幕尺寸下,它们都是占满整行的了。就像下面这样:
- grid-column: 1 / -1;
- .wide,
- .hero,
- .header,
- .footer {
- grid - column: 1 / -1;
- }
使用
和
- grid-template-areas
是两种控制行数的属性,你也可以两个同时用。你可以使用那些隐含的行名去设置你的网格。
- grid-line-numbers
- .grid {
- grid - template - areas: "main main sidebar sidebar";
- }
这段代码,我们能得到四个隐含名字,
,
- main-start
,
- main-end
, 和
- sidebar-start
。
- sidebar-end
这可能很有用,如果你想重叠内容,无论是在几个网格区域或在一个特定分段的网格区域。
就像给网格的行命名,特殊的行名能用于设置网格区域,语法是这样的:
- .grid {
- grid - template - areas: "header header header""main main sidebar""footer footer footer";
- }
如果你的布局设计 (太多列的布局!没列都要起名字,可能还需要空元素) 中有很多空的区域,这种写法稍微有点麻烦。所以对于网格是有另一种写法的,在这种写法中,名字是什么无所谓,只要你合理利用到
和
- [name-start]
,也能达到自己的布局目的。下面是一个例子:
- [name-end]
- .grid {
- display: grid;
- grid - template - columns: 20px 100px[main - start] 1fr[main - end] 100px 20px;
- grid - template - rows: 100px[main - start] 100px[main - end] 100px;
- }.griditem1 {
- background - color: red;
- grid - area: main;
- }
你可能并不想整个页面都用这种方式布局,但是如果你想要结合
来确定行数的话,它会非常适合。
- grid-area
虽然你可以在 CSS 网格中使用任意尺寸的行或列,但是如果想要相等大小的格子并是响应式的,你就需要使用 vmin 单位了。
- .grid {
- grid - template - columns: repeat(5, 20vw);
- grid - template - rows: repeat(5, 20vh);
- }
这种布局在台式电脑和笔记本上基本都可以完美显示,但是在手机上,高度大于宽,内容将会溢出,产生出一个横向的滚动条。Dudley Storey 写了篇 blog 说这件事 。这种方法,通过调整容器视口的百分比和内容位置,做到适配各种尺寸的屏幕。
- .gridcontainer {
- display: grid;
- width: 100vw;
- height: 100vh;
- justify - content: center;
- align - content: center;
- grid - template - columns: repeat(5, 20vmin);
- grid - template - rows: repeat(5, 20vmin);
- }
当我们绝对定位一个网格元素的时候,这个元素会跑到它的容器中,我们可以用
和
- grid-column
来定位它。正常情况下,绝对定位使元素脱离文档流,它最适合的使用场景就是想要让元素重叠,并不打乱其他布局元素。除非你为每个元素声明
- grid-row
和
- grid-column-start
,要不然即使使用了绝对定位,元素也是不会重叠的。
- grid-row-start
尝试删除这个例子中 div 的
,思考
- position: absolute;
和
- grid-column
的值,也可以试试修改它们,你就明白是什么意思了。
- grid-row
如果你使用过弹性盒(flexbox)的
属性,那你已经知道一些相关的知识了。所有的网格元素都有一个默认的 order 值 0。所以如果给一个网格元素设置
- order
,这个元素将在所有元素的后面。 你可以给
- order: 1;
属性设置负值,让它跑到所有 item 的前面。
- order
想不想要整行随着内容的宽度而变宽,直到他们达到最大宽度,这种情况你可能想尝试使用
:
- minmax()
- .grid {
- display: grid;
- grid - template - columns: repeat(3, minmax(1fr, 300px));
- }
不幸的是,像上面这样看似简单,实际上是不行的。如果
小于
- max
的话,CSS 会被忽略。在
- min
中
- minmax()
不能使用。实际上实现这个需求很容易,在
- fr
或
- grid-template-columns
中使用
- grid-template-rows
,这样 item 就可以随着内容增大而变大了。
- auto
我们可以设置一个
:
- max-width
- .grid {
- display: grid;
- grid - template - columns: repeat(3, auto);
- }.item {
- max - width: 300px;
- }
来源: http://www.tuicool.com/articles/ZnEZBf7