Grid

参考：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html Demo：https://codepen.io/a2h1o9/full/YzZOVWW

容器

容器类型（display）

• display: grid

• display: inline-grid

  行列相关属性

  设定网格（gtc\gtr)

  grid-template-rows: <第一行高> <第二行高> ...<第N行高>
grid-template-columns: <第一列宽> <第二列宽> ...<第N列宽>
  可以通过 grid-template-rows 和 grid-template-columns 设定容器的行数行高和列数列宽，有多少行（列）就有多少个值（空格分隔），而值本身就是行高（列宽），如：

  • 把容器分为 3行，每行行高200px ：grid-template-rows: 200px 200px 200px
  • 把容器分为 2行，行1高100px，行2高200px ：grid-template-rows: 100px 200px
  • 把容器分为 4列，每列宽25% ：grid-template-columns: 25% 25% 25% 25%
  • 把容器分为 2列，列1宽100px，列2宽50% ：grid-template-rows: 100px 50%
  • 把容器分为 左列固定宽度，右列自适应 ：grid-template-columns: 200px auto

当两个属性一并设置时，就可以实现网格布局，如：

• 3 * 3 布局：grid-template-rows: 300px 300px 300px; grid-template-columns: 300px 300px 300px （Demo 1）

• 3 * 2 布局：grid-template-rows: 200px 200px 200px; grid-template-columns: 200px 200px （Demo 2）

  repeat()

  repeat(<重复次数>, <重复值>) 是行列的值的简写方法，可以减少重复值的填写，如：

• grid-template-rows: 200px 200px 200px => grid-template-rows: repeat(3, 200px)

• grid-template-columns: 25% 25% 25% 25% => grid-template-columns: repeat(4, 25%)
• grid-template-columns: 25% 15% 25% 15% => grid-template-columns: repeat(2, 25% 15%)

• grid-template-columns: 200px 15% 15% 100px => grid-template-columns: 200px repeat(2, 15%) 100px

  fr

  fr 表示剩余空间份数：行高（列宽）的值 = 剩余空间 * 当前行（列）份数 / 总份数。其中，总份数为当前行（列）的 fr 总和。如：

• grid-template-columns: 1fr 1fr ：总份数为 2，共2列，每列为1份

• grid-template-columns: repeat(5, 1fr) ：总份数为 5，共2列，每列1份
• grid-template-columns: repeat(5, 1fr 2fr) ：总份数为 15，共10列，单数列1份，双数列2份

实列 - 以 grid-template-columns 为例：

1. 容器宽度为 1000px，把容器分为 等宽四列，可以是 grid-template-columns: repeat(4, 25)% ，也可以用 grid-template-columns: 1fr 1fr 1fr 1fr 或 grid-template-columns: repeat(4, 1fr) 。此时，容器剩余空间为 1000px，共把剩余空间分为 4份，每列占 1份，宽度为 250px。（Demo 3）
2. 容器宽度为 1000px，把容器分为 四列，我们希望第一列固定宽度 300px，第二列为剩余空间的 50% ，第三第四列为剩余空间的 25%。可以为 grid-template-columns: 300px 2fr repeat(2, 1fr) 。此时，第一列宽 300px，容器剩余空间为 700px，共把剩余空间分为 4份，第二列为 2份，宽度为 350px，第三第四列各为 1份，宽度为 175px。（Demo 4）

minmax()

minmax(<最小宽高>, <最大宽高>) 用于设定宽高的范围。
空间不足式，有最小宽高。
空间有剩余时，有最大宽高。（Demo 5）

auto

当前列充满剩余空间。

auto-fill

当宽高固定，可以无需关注容器宽高，以固定宽高充满整个容器。
配合 repeat() 使用，如：每列宽 300px，充满整个容器可写为grid-template-columns: repeat(auto-fill, 300px)。（Demo 6）

网格线名称

当把容器分为 3 行时，会生成 4 条横向网格线。这四条网格线可以被命名，方便以后引用，如： grid-template-rows: [r1] 200px [r2] 200px [r3] 200px [r4]。
且每条线还可以拥有多个名字，如： grid-template-rows: [r1 row1] 200px [r2 row2] 200px [r3 row3] 200px [r4 row4]。其中，rN 和 rowN 都是这条线的名称。

网格相关属性

grid-row-gap/grid-column-gap/grid-gap

网格间宽度：

• grid-row-gap 行间宽度
• grid-column-gap 列间宽度

• grid-gap 行列间宽度缩写，grid-gap: <row-gap> <column-gap> ，当只有一个值时，列间宽度等于行间宽度

  grid-template-areas

  用于至指定“区域”，一个“区域”由一个或多个格子组成。如有一个 3 * 3布局的容器：

• 每个格子都是一个单独的区域：grid-template-areas: 'a b c', 'd e f', 'g h i'。

• 每行三个格子为一个区域：grid-template-areas: 'a a a', 'b b b', 'c c c'。
• 如有不需要执行“区域”的格子：grid-template-areas: 'a . c', 'd . f', 'g . i'。

当指定区域名后，区域的起始网格线和结束网格线会自动命名为 areaName-start 和 areaName-end。

grid-auto-flow(dense 待)

指定容器中格子的排列顺序，默认为横向排列（ row ），可改为列向排列（ column ）（Demo 8）。

justify-items/align-items/place-items

三个属性用于设定格子中内容的位置。设置后，格子本身的大小不变，但格子中的dom大小将是内容大小（默认情况下，格子中的dom大小与格子大小相同）。此时，overflow 将不起作用，原因是 overflow 作用于 dom 本身，这里溢出的是格子，而 dom 本身没有溢出（Demo 9）
其中 place-items 为 justify-items 和 align-items 的缩写，place-items: <justify-items> <align-items>。
justify-items 水平方向上位置，align-items 垂直方向上位置

• start 起始格线
• end 结束格线
• center 居中

• stretch 拉伸

  justify-content/align-content/place-content

  三个属性用于设定格子在容器中的位置。（Demo 10）
  justify-content 水平方向上位置，align-content 垂直方向上位置

• start

• end
• center
• stretch
• space-around 行/列两边的间隔相等（行/列间间隔是边缘的两倍）
• space-between

• space-evenly 行/列间间隔与边缘间隔相等

  grid-auto-rows/grid-auto-columns

  当我们设置了一个 2 * 2 的网格后，Grid 将给第五个及以后元素的自动生成新的网格放置他们，这些我们设置的网格可称为显式网格，自动生成的网格可称为隐式网格。
  隐式网格可分为半隐式网格和全隐式网格。如：

• 设置了一个 2 * 2 的显示网格后，第三行第一列的的网格为半隐式网格，因为 grid-template-columns 的设定依旧作用于他，而 grid-template-row 则不再作用于他，代替他的是 grid-auto-rows 。（Demo 11）

• 设置了一个 2 * 2 的显示网格后，第三行第第三列的的网格为全隐式网格，因为 grid-template-columns 或 grid-template-rows 都不作用于他，代替他们的是 grid-auto-columns 和 grid-auto-rows 。（Demo 12）

  gird-template/grid(不推荐：可读性差)

  grid-template 是 gird-template-columns grid-template-rows grid-template-areas 的缩写
  grid 是 grid-template-rows grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns grid-auto-flow 的缩写

  格子

  大小与位置

  grid-column-start/grid-column-end/grid-row-start/grid-row/end

  这四个属性可以用于设置格子的大小与位置，当设定网格后，会自动产生网格线（或自主设置）。此时，可以设置格子的四个网格线的位置控制格子大小。（Demo 13）

  span

  grid-column-start grid-column-end grid-row-start grid-row-end 的值，表示跨域了多少个格子的意思，即 start 与 end 之间有多少个格子（无需关注格子本身大小）。 （Demo 13）

  grid-column/grid-row

• grid-column 为 grid-column-start 和 grid-column-end 的缩写：grid-column: <grid-column-start> / <grid-column-end>

• grid-row为 grid-row-start 和 grid-row-end 的缩写：grid-row: <grid-row-start> / <grid-row-end>

  grid-area

  配合 grid-template-areas 使用，设定格子的区域（Demo 14）。

  • grid-area: e：配合 grid-template-areas ，直接写入设定好的区域名称

  • grid-area: 1 / 2 / 3 / 4：grid-row-start grid-column-start grid-row-end grid-column-end 的缩写。

    justify-self/align-self/place-self

    设置格子本身位置，其中 place-self 为缩写： place-self: <justify-self> <align-self>
    效果与 justify-items align-items place-items 相同，区别在于 -self 对单个起作用，-items 对所有格子起作用。
    justify-self水平方向上位置，align-self 垂直方向上位置 （Demo 15）

  • start 起始格线

  • end 结束格线
  • center 居中
  • stretch 拉伸