Grid

概念

Grid布局是一种二维布局方法，能够在行和列中布置内容。因此在任何网格中都有两个轴，横轴（即行轴，内联）和纵轴（即列轴，块）。

什么是网格

网格是一组相交的水平线和垂直线，它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上

固定或弹性的轨道的大小

• 可以使用固定的轨道尺寸创建网格，比如使用像素单位。
• 也可以使用比如百分比或者fr(专门为此目的创建的新单位)来创建有弹性尺寸的网格

网格容器

通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。一旦我们这样做，这个元素的所有直系子元素将成为网格元素。

网格轨道

通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。这些属性定义了网格的轨道。一个网格轨道就是网格中任意两条线之间的空间。

fr单位

轨道可以使用任何长度单位进行定义。
网格还引入了一个新的长度单位fr代表网格容器中可用空间的一等份。

在轨道清单中使用repeat()

有着多轨道的大型网格可使用 repeat() 标记来重复部分或整个轨道列表。

.wrapper {display: grid;grid-template-columns: 1fr 1fr 1fr;
}

两者等价

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

Repeat 语句可以用于重复轨道列表中的一部分。在下面的例子中我创建了一个网格：它起始轨道为20像素，接着重复了6个1fr的轨道，最后再添加了一个20像素的轨道。

.wrapper {display: grid;grid-template-columns: 20px repeat(6, 1fr) 20px;
}

隐式网格

如果在网格定义之外又放了一些东西，或者因为内容的数量而需要的更多网格轨道的时候，网格将会在隐式网格中创建行和列.
按照默认，这些轨道将自动定义尺寸，所以会根据它里面的内容改变尺寸。
也可以在隐式网格中用 grid-auto-rows 和 grid-auto-columns 属性来定义一个设置大小尺寸的轨道。

轨道大小 和 minmax()

在设置一个显式的网格或者定义自动创建的行和列的大小的时候，我们也许想给网格一个最小的尺寸，确保他们能扩大到容纳他里面添加的内容。
网格用minmax()函数来解决这个问题。

网格线

当我们定义网格时，我们定义的是网格轨道，而不是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素.
网格线的编号顺序取决于文章的书写模式。在从左至右书写的语言中，编号为 1 的网格线位于最左边。在从右至左书写的语言中，编号为 1 的网格线位于最右边。

跨轨道放置网格元素

使用了grid-column-start, grid-column-end, grid-row-start 和 grid-row-end 属性

网格单元

一个网格单元是在一个网格元素中最小的单位， 从概念上来讲其实它和表格的一个单元格很像。

网格区域

网格元素可以向行或着列的方向扩展一个或多个单元，并且会创建一个网格区域。网格区域的形状应该是一个矩形 - 也就是说你不可能创建出一个类似于“L”形的网格区域。

网格间距

在两个网格单元之间的 网格横向间距 或 网格纵向间距 可使用 grid-column-gap 和 grid-row-gap 属性来创建，或者直接使用两个合并的缩写形式 grid-gap。

嵌套网格

一个网格元素可以也成为一个网格容器。

CSS属性

display

• grid ：生成一个块级网格
• inline-grid ：生成一个内联网格
• subgrid ：嵌套网格

grid-template-columns

• 该属性是基于 网格列. 的维度，去定义网格线的名称和网格轨道的尺寸大小。
• 这些值表示 网格轨道(Grid Track) 大小，它们之间的空格表示网格线。

grid-template-rows

• 该属性是基于 网格行 的维度，去定义网格线的名称和网格轨道的尺寸大小。

grid-template-areas

• 该属性是 grid areas 在CSS中的特定命名.
• 通过引用 grid-area 属性指定的 网格区域(Grid Area) 名称来定义网格模板。重复网格区域的名称导致内容跨越这些单元格。一个点号（.）代表一个空的网格单元。这个语法本身可视作网格的可视化结构。

grid-template

• 用于定义 grid-template-rows ，grid-template-columns ，grid-template-areas 缩写(shorthand)属性。

grid-row-gap

• 设置行元素之间的间隙(gutter)大小

grid-column-gap

• 设置元素列之间的间隔(gutter)大小

grid-gap

• grid-row-gap 和 grid-column-gap 的缩写语

justify-items

• 沿着 行轴线(row axis) 对齐 网格项(grid items) 内的内容
• justify-items: start | end | center | stretch;

align-items

• 沿着 列轴线(column axis) 对齐 网格项(grid items) 内的内容
• align-items: start | end | center | stretch;

demo

demo传送地址