Grid布局一

一、简介

CSS网格布局（又称“网格”），是一种二维网格布局系统。CSS在处理网页布局方面一直做的不是很好。一开始我们用的是table（表格）布局，然后用float(浮动)，position（定位）和inline-block（行内块）布局，但是这些方法本质上是hack，遗漏了很多功能，例如垂直居中。后来出了flexbox(盒子布局)，解决了很多布局问题，但是它仅仅是一维布局，而不是复杂的二维布局，实际上它们（flexbox与grid）能很好的配合使用。Grid布局是第一个专门为解决布局问题而创建的CSS模块,2012年11月06日成立草案。

二、容器
网格布局的容器是设置display为grid或者inline-grid，这一点跟flex布局很像，而它的子元素就是网格元素。

1.网格线
分割网格的线称为网格线，包括横向（从左往右）和纵向（从右往左）。网格线可以通过grid-template-columns和grid-template-rows命名，默认以数字命名（注意是从1开始）。

2.网格轨道（Grid Track）
两个相邻的网格线之间为网格轨道。你可以认为它们是网格的列或行，下面在第二个和第三个网格线之间的黄色部分为网格轨道

3.网格单元（Grid Cell）

两个相邻的列网格线和两个相邻的行网格线组成的是网格单元，它是最小的网格单元。下面行网格线1（row grid lines 1）、行网格线2（row grid lines 2）和列网格线2（column grid lines 2）、列网格线3（column grid lines 3）组成的黄色区域为网格单元。

4.网格区（Grid Area）

网格区是由任意数量网格单元组成，下面行网格线1（row grid lines 1）、行网格线3（row grid lines 3）和列网格线1（column grid lines 1）、列网格线3（column grid lines3）组成的黄色区域为网格区。

三、容器中的属性

1、dislpay属性

display:grid | inline-grid | subgrid;

将元素定义为grid container，并为其内容建立新的网格格式化上下文（grid formatting context）。

<div class="container">

  <div class="item">1</div>

  <div class="item">2</div>

  <div class="item">3</div>

  <div class="item">4</div>

  <div class="item">5</div>

</div>

.container {

    display:grid | inline-grid | subgrid;

}

grid：生成块级网格。

inline-grid：生成行内网格。

subgrid：如果网格容器本身是网格项（嵌套网格容器），此属性用来继承其父网格容器的列、行大小。

注意

当元素设置了网格布局，column、float、clear、vertical-align属性无效。
display:subgrid;目前所有浏览器都不兼容。

2、grid-template属性

1）grid-template-columns / grid-template-rows

使用以空格分隔的多个值来定义网格的列和行。

.container {

  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;

  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;

}

注意：此属性用在容器（container）上面。

轨道大小 track-size： 可以使用css长度（px、em等）、百分比、或用分数（用 fr 单位）

网格线名字 line-name：可以选择任何名字

2）grid-template-areas

通过引用 grid-area 属性指定的 网格区域(Grid Area) 名称来定义网格模板。

.container {

  grid-template-areas: none|

    "grid-area-name|. grid-area-name|. grid-area-name|. ..."

    "grid-area-name|. grid-area-name|. grid-area-name|. ..."

    "......";

}

grid-area-name：使用 grid-area 属性设置的网格区域的名称

"."：点号代表一个空网格单元

none：没有定义网格区域

例如：

.container {

  grid-template-areas:

    "head head head head"

    "main main . sidebar"

    "foot foot foot foot";

}

以上例子强调以下几点：

第一：每一行都一定要用双引号括起来；

第二：每一个值对应一个网格单元，千万不要上面写了4个，下面只写三个，这样的话就会出问题；

第三：每个网格单元里的区域名称都以空格隔开；

第四：每个引号后面是没有任何逗号或封号，仅仅是回车换行。

grid-template

在单个声明中定义 grid-template-rows、grid-template-columns、grid-template-areas的简写。就个人而言，还是不要简写，因为简写之后可读性会变差一些。

.container {

  grid-template: none | subgrid | <grid-template-rows> / <grid-template-columns>;

}

none：将三个属性都设置为其初始值。所谓初始值默认为一行一列一个区域，也就是说回归到块元素本质，就是一个块。网格布局某些方面来说就是把我们的一个块给它用一种格子的形式把他区分为多个格子，也可以理解成是多个块。

subgrid：把 grid-template-rows 和 grid-template-columns 设置为subgrid，并且 grid-template-areas 设置为初始值。简单强调一下，第一：所谓的把行跟列设置为subgrid就是说还是得自己定义一下行和列，都自己定义了，就不必再简写了；第二：把网格区域定义为初始值，就是每个区域的大小都是一个网格单元，如果是这样其实就没必要去定义它。subgrid是目前为止所有浏览器都不兼容，那么在这里它依然适用，所以跟大家说一下：不推荐大家使用，只需了解知道即可。

grid-template-rows / grid-template-columns：把 grid-template-rows 和 grid-template-columns 设置为指定值，与此同时，设置 grid-template-areas 为none

.container {

  grid-template:

    [row1-start] "head head head" 25px [row1-end]

    [row2-start] "foot foot foot" 25px [row2-end]

    / auto 50px auto;

}

等同于

.container {

  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];

  grid-template-columns: auto 50px auto;

  grid-template-areas:

    "head head head"

    "foot foot foot";

}

不建议简写，避免混淆。

3、gap属性

grid-column-gap / grid-row-gap

指定网格线的大小，可以想象为设置列/行之间间距的宽度。也可以说是网格轨道之间的间距

.container {

  grid-column-gap: <line-size>;

  grid-row-gap: <line-size>;

}

line-size：一个长度值

grid-gap

grid-row-gap 和 grid-column-gap 的缩写。

.container {

  grid-gap: <grid-row-gap> <grid-column-gap>;

}

说明

起初是用 grid-gap 属性来定义的，目前逐渐被 gap 替代。
如果没有指定 grid-row-gap，则会被设置为与 grid-column-gap 相同的值。

4、items属性

justify-items

沿着行轴对齐网格内的内容。

.container {

  justify-items: start | end | center | stretch;

}

start：内容与网格区域的左端对齐

end：内容与网格区域的右端对齐

center：内容位于网格区域的中间位置

stretch：内容宽度占据整个网格区域空间（这是默认值）

align-items

沿着列轴对齐网格内的内容。

.container {

  align-items: start | end | center | stretch;

}

start：内容与网格区域的顶端对齐

end：内容与网格区域的底部对齐

center：内容位于网格区域的垂直中心位置

stretch：内容高度占据整个网格区域空间（这是默认值）

place-items

设置 justify-items 和 align-items 的简写形式。
注意：书写顺序为先列轴属性值后行轴属性值。

.container {

  place-items: center;

}

以上表示水平和垂直居中。

5、content属性

justify-content

设置网格容器内的网格沿着行轴对齐网格的对齐方式。

.container {

  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    

}

start：网格与网格容器的左边对齐

end：网格与网格容器的右边对齐

center：网格与网格容器的中间对齐

stretch：调整 grid item 的大小，让宽度填充整个网格容器

space-around：在 grid item 之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半

space-between：在 grid item 之间设置均等宽度的空白间隙，其外边缘无间隙

space-evenly：在每个 grid item 之间设置均等宽度的空白间隙，包括外边缘

align-content

设置网格容器内的网格沿着列轴对齐网格的对齐方式。

.container {

  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  

}

start：网格与网格容器的顶部对齐

end：网格与网格容器的底部对齐

center：网格与网格容器的中间对齐

stretch：调整 grid item 的大小，让高度填充整个网格容器

space-around：在 grid item 之间设置均等高度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半

space-between：在 grid item 之间设置均等高度的空白间隙，其外边缘无间隙

space-evenly：在每个 grid item 之间设置均等高度的空白间隙，包括外边缘

place-content

设置 align-content 和 justify-content 的简写形式。
注意：书写顺序为先列轴对齐属性值后行轴对齐属性值。

6、grid-auto属性

grid-auto-columns / grid-auto-rows

指定自动生成的网格轨道（又名隐式网格轨道）的大小。

隐式网格轨道

隐式网格轨道在显示的定位超出指定网格范围的行或列时被创建。也就是说网格项超出，一种是太多了，还有一种分两种情况：如果说仅仅因为太多的话，我们只需要控制行就可以了，列这一块的话肯定是跟着上面是一样的。但是有时列也会超出，超出情况会在讲到网格项的地方提到过，当网格项确定在网格单元或网格区域的时候是可以控制的，控制的时候除了网格区域的名字之外，它也可以通过地址条网格线来控制，但是这个线的名字如果是超过的时候就会出来，那么在这种情况下就会自动生成隐式网格轨道。

隐式网格轨道个人是不建议大家使用的，因为我们的这个隐式网格我们在容器当中一般来说我们在容器中统揽大局然后抠出局部，结果局部不由大局控制反而影响大局，这就有点反客为主，喧宾夺主的意思了，那在控制起来势必会有混乱，所以隐式网格轨道不是特别提倡大家使用。

.container {

  grid-auto-columns: <track-size> ...;

  grid-auto-rows: <track-size> ...;

}

track-size：可以是一个长度值，一个百分比，或者一个自由空间的一部分（使用 fr 单位）

grid-auto-flow

控制自动布局算法的工作方式。

.container {

  grid-auto-flow: row | column | row dense | column dense

}

row：告诉自动布局算法依次填充每行，根据需要添加新行 （默认）

column：告诉自动布局算法依次填充每列，根据需要添加新列

dense：告诉自动布局算法，如果后面出现较小的 grid item，则尝试在网格中填充空洞

注意：dense 只会更改网格项的可视顺序，并可能导致它们出现乱序，这对可访问性不利。

7、grid属性

在单个属性中设置所有以下属性的简写： grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 和 grid-auto-flow 。

当然像左对齐、右对齐这些对齐方式等就不能简写在上面。就是说我们可以把多少行多少列以及它的区域还有隐式轨道以及他的布局方式都可以简写到 grid 里面并且同时将 sets grid-column-gap 和 grid-row-gap设置为他们的初始值，即使它们不能被此属性显示设置。

.container {

  grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];

}

none：将所有子属性设置为其初始值。

grid-template-rows / grid-template-columns：将 grid-template-rows 和 grid-template-columns 分别设置为指定值，将所有其他子属性设置为其初始值

grid-auto-flow [grid-auto-rows [/ grid-auto-columns]]：接受所有与 grid-auto-flow，grid-auto-rows 和 grid-auto-columns 相同的值。如果省略 grid-auto-columns，则将其设置为 grid-auto-rows指定的值。如果两者都被省略，则它们被设置为它们的初始值

.container {

  grid: [row1-start] "head head head" 1fr [row1-end]

        [row2-start] "foot foot foot" 25px [row2-end]

        / auto 50px auto;

}

等价于：

.container {

  grid-template-areas:

    "head head head"

    "foot foot foot";

  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];

  grid-template-columns: auto 50px auto;    

}

简写形式就简单的做一个介绍，实际开发当中不建议简写形式。