来自 奥门威尼斯网址 2019-10-19 00:33 的文章
当前位置: 威尼斯国际官方网站 > 奥门威尼斯网址 > 正文

原生CSS网格布局学习笔记

原生CSS网格布局学习笔记

2016/12/22 · CSS · 网格布局

原稿出处: css-tricks   译文出处:众成翻译   

翻译注:此文切合有一定CSS原生网格布局使用经验的开荒者(读前内需先去打听一下原生CSS网格的语法),原生CSS网格布局(Native CSS grid)甘休最近还不曾被其余专门的学业版本的浏览器完成。

以下是来自奥利弗 Williams的帖子. Oliver已经学习了一定长日子的原生CSS网格,能够说是在CSS网格方面有必然的领导权。在此篇小说中,他将以独特的思绪分析本人的CSS网格布局学习之路。小编相比较偏向他的主张,正是上学一门新本事的时候,把它们拆分成不大的单元块并配上实例,一步一步的学习。那比一贯攻读网格布局的有着东西要好太多了。

浏览器原生CSS网格估算会在前年新年获得协理. 在这里此前你须要在浏览器中开启那么些实验性的意义 (Firefox实验版暗中认可是张开的). Chrome Canary是近来最佳的落成. 同一时候,火狐有叁个非常好的插件叫CSS Grid Inspector, 它能显示出网格的线,它是时下独一能够在浏览器中运维的此类工具。

在 chrome的地址栏中输入chrome://flags, 找到 ‘实验性互联网平台作用’ 并拉开它. IE 和 Edge 实现的是三个相比老的网格标准,以后并不受扶植。

原来的书文地址

网格布局不是将散装的块拼到一同

深信小编,相当的慢你就能够调整它的.

图片 1

网格布局只可以像左侧那样,以矩形的单元块组合起来。并无法像右图那样,由一群零散的多边形(跟俄罗丝四方那样的块)拼凑。

注:此文是本身翻译的率先篇技艺作品。切合有料定CSS原生网格布局使用经验的开辟者(读前亟待先去探听一下原生CSS网格的语法),原生CSS网格布局(Native CSS grid)截止这几天还向来不被其余语专科高校业版本的浏览器完毕。

设计网格布局并非为着代替弹性盒,相反,它是弹性盒的一种补偿

虽说网格布局和弹性盒在一些地方起到平日的功能,並且你能够窥见,非常多人用弹性盒来落到实处网格布局,但那而不是设计弹性盒的最初的心愿。Jake Archibald的那篇博文值得一读_Don’t use flexbox for overall page layout。

这篇博文大致的意味是:

  • Flexbox(弹性盒)是为一维布局设计的(行或列)。
  • CSS网格是为二维设计的.

Rachel Andrews也 说过类似的话:

Flexbox(弹性盒)用于一维布局 – 也正是行照旧列. 网格用于二维布局 – 也正是多行多列.

它们得以很好的咬合,你可以后弹性容器中放入网格,也能够在网格块中参与flex成分

来看个例证吗。 咱们想在多个网格成分(grid item)里垂直居中一段文字, 但我们想要让背景(图片,颜色或渐变)覆盖全体的网格区域。 大家得以应用align-items品质,并把它的值设为center,可是假如那样背景并不会填满全部网格成分的区域。align-items 私下认可的值是 stretch-你不转移它,始终会填满整个空间的。我们把网格元素设为align-items:center并把网格成分(grid item)设置为叁个弹性容器(flex container)。

CSS

.grid { align-items: stretch; } .griditem { display: flex; align-items: center; }

1
2
3
4
5
6
7
8
.grid {
  align-items: stretch;
}
 
.griditem {
  display: flex;
  align-items: center;
}

_以下是根源奥利弗 Williams的帖子. 奥利弗已经学习了一定长日子的原生CSS网格,能够说是在CSS网格方面有一定的发言权。在这里篇作品中,他将以特别的思绪解析自身的CSS网格布局学习之路。我非常赞同他的主见,正是上学一门新技术的时候,把它们拆分成非常的小的单元块并配上实例,一步一步的就学。那比一贯攻读网格布局的具备东西要好太多了。

给grid-column-end设置负值,意料之外的实用

在小显示屏下,写一个12列的网格,全部格子的跨度都12列。

你能够用网格那样做:

CSS

/* 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; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 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;来令你的页面一直是从左到右贯穿的。

CSS

/* For small screens */ .span4, .span6, .spanAll { grid-column-end: -1; }

1
2
3
4
/* For small screens */
.span4, .span6, .spanAll {
  grid-column-end: -1;
}

在大荧屏上,你想要尽或许的近乎12列,可是在移动端,一行大致是1~4列。用media来更改grid-template-columns是特别轻易的。

CSS

.grid { grid-template-columns: 1fr 1fr; } @media (min-width: 700px) { .grid { grid-template-columns: repeat(12, 1fr); } }

1
2
3
4
5
6
7
8
9
.grid {
  grid-template-columns: 1fr 1fr;
}
 
@media (min-width: 700px) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
  }
}

有一部分元素,大家想让它贯穿整个视口,比方像 header, footer,和一部分大图啥的。

对此小显示屏,大家得以那样写:

CSS

.wide { grid-column: 1 / 3; /* start at 1, end at 3 */ }

1
2
3
.wide {
  grid-column: 1 / 3; /* start at 1, end at 3 */
}

不佳的是,当大家换来大屏的时候,一行12列,那几个成分将只是占满前两列,并不会占满12列,我们供给定义新的grid-column-end,况兼把她的值设为 13. 这种措施相比较麻烦,还应该有一种简易的艺术,grid-column: 1 / -1;,那样无论在如何显示器尺寸下,它们都是占满整行的了。如同上边那样:

CSS

.wide, .hero, .header, .footer { grid-column: 1 / -1; }

1
2
3
.wide, .hero, .header, .footer {
  grid-column: 1 / -1;
}

See the Pen Easier media queries with -1 by CSS GRID (@cssgrid) on CodePen.

浏览器原生CSS网格预计会在二零一七年年初获取帮衬. 在以前面您供给在浏览器中拉开那么些实验性的效劳 (Firefox实验版默许是翻开的). Chrome Canary是当前最棒的实现. 同期,火狐有贰个不胜好的插件叫CSS Grid Inspector, 它能显得出网格的线,它是方今独一能够在浏览器中运营的此类工具。

网格区域能够命名,并动用部分暗含的名字

使用grid-template-areasgrid-line-numbers是三种调整行数的习性,你也足以三个同临时候用。你能够采纳那多少个包蕴的行名去设置你的网格。

CSS

.grid { grid-template-areas: "main main sidebar sidebar"; }

1
2
3
.grid {
  grid-template-areas: "main main sidebar sidebar";
}

这段代码,大家能收获多个带知名字,main-start, main-end, sidebar-start, 和 sidebar-end.

那说不定很有用,倘若您想重叠内容,无论是在多少个网格区域或在三个特定分段的网格区域。

See the Pen implicit line names with grid areas by CSS GRID (@cssgrid) on CodePen.

在 chrome的地方栏中输入chrome://flags, 找到 ‘实验性网络平台功效’ 并拉开它. IE 和 Edge 完毕的是多少个比较老的网格标准,现在并不受帮助。

概念网格区域的另一种方法

就好像给网格的行命名,特殊的行名能用来安装网格区域,语法是那般的:

CSS

.grid { grid-template-areas: "header header header" "main main sidebar" "footer footer footer"; } 、

1
2
3
4
5
6
.grid {
  grid-template-areas:
    "header header header"
    "main main sidebar"
    "footer footer footer";
} 、

假若你的布局规划(太多列的布局!没列都要起名字,大概还索要空成分)中有众多空的区域,这种写法稍微有一点麻烦。所以对于网格是有另一种写法的,在此种写法中,名字是怎么不留意,只要您合理施用到[name-start][name-end],也能完成本人的布局指标。下边是二个事例:

CSS

.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; }

1
2
3
4
5
6
7
8
9
10
.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;
}

See the Pen Another way of defining grid-areas by CSS GRID (@cssgrid) on CodePen.

你恐怕并不想任何页面都用这种方法布局,不过假若你想要结合 grid-area来规定行数的话,它会特别相符。

网格布局不是将散装的块拼到一同

相信自身,一点也不慢你就会掌握它的.

图片 2

网格布局只可以像侧面那样,以矩形的单元块组合起来。并不可能像右图那样,由一堆零散的多方面形(跟俄罗丝方块这样的块)拼凑。

也正是尺寸网格(equal sized box layout)使用vmin单位

纵然如此您可以在CSS网格中运用狂妄尺寸的行或列,不过一旦想要相等大小的格子并是响应式的,你就需求运用vmin单位了。

CSS

.grid { grid-template-columns: repeat(5, 20vw); grid-template-rows: repeat(5, 20vh); }

1
2
3
4
.grid {
  grid-template-columns: repeat(5, 20vw);
  grid-template-rows: repeat(5, 20vh);
}

这种布局在台式Computer和台式机上着力都能够周详字彰显示,不过在手提式无线电话机上,中度超越宽,内容将会溢出,爆发出贰个横向的滚动条。DudleyStorey写了篇blog说那件事the usefulness of a lesser-known css unit: vmin。这种办法,通过调解容器视口的比例和内容地方,做到适配种种尺寸的荧屏。

CSS

.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); }

1
2
3
4
5
6
7
8
9
.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);
}

See the Pen Boxy Layout with CSS Grid and vmin by CSS GRID (@cssgrid) on CodePen.

规划网格布局并非为着替代弹性盒,相反,它是弹性盒的一种补偿

即使如此网格布局和弹性盒在某个地点起到常常的职能,况兼你能够窥见,非常多个人用弹性盒来贯彻网格布局,但那并非设计弹性盒的初志。Jake Archibald的那篇博文值得一读_Don't use flexbox for overall page layout。

那篇博文差十分的少的乐趣是:

  • Flexbox(弹性盒)是为一维布局设计的(行或列)。

  • CSS网格是为二维设计的.

Rachel Andrews也 说过类似的话:

Flexbox(弹性盒)用于一维布局 – 也便是行还是列. 网格用于二维布局 – 也便是多行多列.

它们能够很好的咬合,你可未来弹性容器中归入网格,也能够在网格块中步入flex成分

来看个例子吗。 我们想在三个网格成分(grid item)里垂直居中一段文字, 但大家想要让背景(图片,颜色或渐变)覆盖全体的网格区域。 大家能够接纳align-items个性,并把它的值设为center,可是如果这么背景并不会填满整个网格成分的区域。align-items 私下认可的值是 stretch-你不变它,始终会填满整个空间的。大家把网格成分设为align-items:center并把网格成分(grid item)设置为几个弹性容器(flex container)。

.grid {
  align-items: stretch;
}

.griditem {
  display: flex;
  align-items: center;
}

相对定位

当大家相对定位一个网格成分的时候,那个因素会跑到它的器皿中,大家得以用grid-column 和 grid-row来牢固它。平常境况下,相对定位使成分脱离文书档案流,它最相符的采取情形就是想要让要素重叠,并不打乱其余布局成分。除非你为每一种元素评释grid-column-startgrid-row-start,要不然正是使用了相对定位,成分也是不会重叠的。

尝试删除这几个事例中div的position: absolute;,思量grid-column 和 grid-row的值,也能够尝试修改它们,你就通晓是哪些意思了。

See the Pen preserving auto-placement with position: absolute by CSS GRID (@cssgrid) on CodePen.

给grid-column-end设置负值,意想不到的灵光

在小显示器下,写八个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;
}

See the Pen Easier media queries with -1 by CSS GRID (@cssgrid) on CodePen.

更改网格元素(grid item)的逐条

一旦你利用过弹性盒(flexbox)的order 属性,那您早就领会有个别连锁的学识了。全数的网格成分都有二个私下认可的order值0。所以只要给叁个网格成分设置 order: 1;,这一个成分将要装有因素的末端。 你可以给order属性设置负值,让它跑到独具item的前边。

See the Pen Order value by CSS GRID (@cssgrid) on CodePen.

网格区域能够命名,并动用部分分包的名字

使用grid-template-areasgrid-line-numbers是三种调节行数的品质,你也能够四个同期用。你能够选择那个包涵的行名去设置你的网格。

.grid {
  grid-template-areas: "main main sidebar sidebar";
}

这段代码,大家能收获八个满含名字,main-start, main-end, sidebar-start, 和 sidebar-end.

那或者很有用,若是您想重叠内容,无论是在多少个网格区域或在二个特定分段的网格区域。

See the Pen implicit line names with grid areas by CSS GRID (@cssgrid) on CodePen.

grid中 minmax()的坑

想不想要整行随着剧情的小幅度而变宽,直到他们完成最急剧面,这种景况你也许想尝试利用 minmax()

CSS

.grid { display: grid; grid-template-columns: repeat(3, minmax(1fr, 300px)); }

1
2
3
4
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(1fr, 300px));
}

噩运的是,像上面那样看似轻巧,实际上是丰富的。假若max小于min的话,css会被忽略。在minmax()fr无法接纳。实际上完毕这一个必要很轻易,在grid-template-columnsgrid-template-rows中使用auto,那样item就可以趁机情节增大而变大了。 See the Pen The value of auto vs fr by CSS GRID (@cssgrid) on CodePen.

大家得以设置八个 max-width:

CSS

.grid { display: grid; grid-template-columns: repeat(3, auto); } .item { max-width: 300px; }

1
2
3
4
5
6
7
8
.grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
}
 
.item {
  max-width: 300px;
}

See the Pen The limits of minmax by CSS GRID (@cssgrid) on CodePen.

minmax()的运营格局和行使自家还并未有完全想出来,纵然那样,笔者只怕写了一篇小说(译者注:Medium entitled是怎么作者从没知晓驾驭,原来的文章:I wrote an entire post on Medium entitled) The One Thing I Hate About Grid.

概念网格区域的另一种方法

就如给网格的行命名,特殊的行名能用来安装网格区域,语法是那样的:

.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;
}

See the Pen Another way of defining grid-areas by CSS GRID (@cssgrid) on CodePen.

您只怕并不想整个页面都用这种艺术布局,然则一旦您想要结合 grid-area来明显行数的话,它会特别切合。

本文由威尼斯国际官方网站发布于奥门威尼斯网址,转载请注明出处:原生CSS网格布局学习笔记

关键词: