网格系统 CSS Grid Layout1

CSS网格(CSS Grid)布局入门

CSS网格布局是浏览器Flexbox布局之后最重要的布局方式。我们可以忘记过去15年经常使用的的各种“神奇数字”,hacks和一系列变通布局方案。网格布局提供了非常简单的声明布局方式,之后再也不需要借助一些常见的主流css框架,也能减少很多手动实现的布局方式

如果你以前不熟悉CSS网格布局,那么你可以开始了解它了。它是一种适用于容器元素,并能指定子元素的间距、大小和对齐方式的布局工具。

CSS网格布局赋予我们更强大的能力——大家熟悉的水平垂直居中布局,不需要增加标签就能做到。同样,这也能让我们不需要媒体查询就能根据可用空间自动适应。

浏览器兼容性

CSS网格布局从Safari 10.1, Firefox 52, Opera 44, Chrome 57开始收到支持,微软Edge在Edge 15会更新对网格布局的支持。

微软的浏览器(IE10–11和Edge 13-14)有一种比较旧的实现,所以有不少限制,我们会简单介绍新的实现方式和老的实现方式之间的区别,这样你能知道如何规避他们。

创建带有间距(gutter)的两列(column)网格

使用grid-template-columns 和 grid-gap创建带间距的两列布局

为了创建上述网格布局,我们需要使用grid-template-columnsgrid-gap
grid-template-columns表示网格中的列是如何布局的,它的值是一连串以空格分割的的值,这些值标识每列的大小,值的个数表示列的数目。

例如,四列250px宽度的网格布局可以这样表示:
`grid-template-columns: 250px 250px 250px 250px;`

也可以使用repeat关键字表示:

  grid-template-columns: repeat(4, 250px);
定义间距

grid-gap定义了网格布局的间距大小,接收一个或两个值,如果定义两个值则表示列(column)和行(row)的间距大小。

*在两列布局示例中,我们可以如下使用: *
 `.grid {
    display: grid;
    grid-template-columns: 50vw 50vw;
    grid-gap: 1rem;
}`

不幸的是,这个间距将会占用容器元素的整体宽度,计算出来就是100vw + 1rem,最终这个布局会导致出现水平滚动条。

viewport导致的水平滚动条

内容对齐

为了对齐示例中的内容,我们在子元素上使用grid布局,并加上对齐属性来定位他们到指定轨道(track),轨道就是一个网格的列或行的某个位置的常见的名称。网格跟Flex布局一样,有一系列对齐的属性——共有四种值——start, center, end, 和stretch,分别对应其子元素所在的轨道。stretch跟其他不太一样,它会将元素从所在轨道的头拉伸到尾。


align-items 和 justify-content

推荐阅读更多精彩内容

  • 原文地址:Getting to know CSS Grid Layout 原文作者:Chris Wright 译者...
    iKcamp阅读 3,189评论 0 13
  • 简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,旨在改变我们基于网格设计的用户界面方式...
    咕咚咚bells阅读 1,973评论 0 4
  • 简介CSS网格布局(又称“网格”),是一种二维网格布局系统。CSS在处理网页布局方面一直做的不是很好。一开始我们用...
    _leonlee阅读 54,748评论 25 170
  • 前言 温馨提示:本文较长,图片较多,本来是想写一篇 CSS 布局方式的,但是奈何 CSS 布局方式种类太多并且实现...
    sunshine小小倩阅读 2,380评论 0 59
  • 喜欢旅行的小伙伴很多,喜欢户户外图不多的人也不少,但大多都因为缺乏徒步经验,要么容易身陷仙境,要么就会临阵放弃。那...
    心安处即归途阅读 176评论 0 2
  • 流水行云山万重,豹变龙骧玉玲珑。 剑拔弩张欧阳骨,铁划银钩羲之风。 龙游瀚海欲腾空,凤舞九天形意中。 墨毫从来分黑...
    大笨笨熊熊阅读 69评论 0 2
  • 我从颜色上决定喜不喜欢你 就像夏日的风 从林荫路上吹过 撸获肥皂泡泡的欢心那样 虽然持续时间很短 我从颜色上决定喜...
    梅园遗珠阅读 76评论 0 0