本篇详细介网格属性表中的各个属性值和其用法。

  • 说明：
    • 网格项(grid item)可以为网格容器(grid container)，也可能为网格单元(grid cell)，因此本篇不使用网格单元作为各属性的描述对象。
    • 网格区域(grid area)是网格单元的一种组织形式。
    • 同理，网格轨道(grid track)也是网格网格单元的一种组织形式。

display

  • 定义：将元素定义为一个网格容器，并将其内容设置为网格格式化环境。
  • 值：
    • grid：网格项为块级元素
    • inline-grid：网格项为行内元素
    • subgrid：如果你想要设置为网格容器元素本身已经是网格项（嵌套网格布局），用这个属性指明这个容器内部的网格项的行列尺寸直接继承其父级的网格容器属性。
      1. .container {
      2. display: grid | inline-grid | subgrid;
      3. }
  • 注意：在网格容器上使用column, float, clear, vertical-align不会产生任何效果。

grid-template-columns / grid-template-rows

  • 定义：定义网格的行和列，值列表用空格分隔。其值代表网格轨道（Grid Track）的尺寸和分隔线之间的空间大小。
  • 值：
    • \： 可以是数值，百分比，fr单位（网格可自由使用的分隔单位，如1fr，2fr）
    • \：定义网格分隔线的名字（任意）
      1. .container {
      2. grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
      3. grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
      4. }
  • 示例：当你把\留空时，分隔线会自动使用值作为自己的名称。
    1. .container{
    2.   grid-template-columns: 40px 50px auto 50px 40px;
    3.   grid-template-rows: 25% 100px auto;
    4. }
    分隔线名称

填充\，用方括号把分隔线包起来。

  1. .container {
  2.     grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  3.     grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
  4. }

分隔线名称

  • 注意：一根分隔线可以有超过一个的名字。例如：第二根分隔线可以有两个名字：row1-end和row2-start。
    1. .container{
    2.   grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
    3. }
  • 如果你的定义中包含重复值，你可以用repeat()函数将它们包裹起来，看起来就像这样：
    1. .container {
    2.   grid-template-columns: repeat(3, 20px [col-start]) 5%;
    3. }
    4. /* 等价于 */
    5. .container {
    6.   grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
    7. }
  • fr（fraction of the free space）弹性单位允许你按比例将空余的网格轨道设置分区。比如，下面这行代码会把网格容器的宽度一分为三。
    1. .container {
    2.   grid-template-columns: 1fr 1fr 1fr;
    3. }
  • 空余空间在所有非弹性项布局之后才计算。在这个例子里面，剩余空间的宽度首先减去了50px。
    1. .container {
    2.   grid-template-columns: 1fr 50px 1fr 1fr;
    3. }

grid-template-areas

  • 定义：通过引用下属带有grid-area属性的网格区域，组成一个网格模板。重复使用网格区域名称会把网格单元放置在一行中。一个点号（.）代表一个空的网格单元。这个语法本身可视作网格的可视化结构。
  • 值：
    • \：由grid-area定义的网格区域名称
    • .（点号） ：代表一个空的网格单元
    • none：不定义网格区域
      1. .container {
      2. grid-template-areas: 
      3. "<grid-area-name> | . | none | ..."
      4. "...";
      5. }
  • 示例：```css.item-a {grid-area: header;}.item-b {grid-area: main;}.item-c {grid-area: sidebar;}.item-d {grid-area: footer;}

.container { grid-template-columns: 50px 50px 50px 50px; grid-template-rows: auto; grid-template-areas: “header header header header” “main main . sidebar” “footer footer footer footer”;}

  1. 以上代码生成一个4列3行的网格。整个第一行由header组成，第二行由main区域，空单元和一个sidebar区域组成。最后一行由footer组成。
  3. ![网格区域名称模板](https://cdn.css-tricks.com/wp-content/uploads/2016/03/grid-template-areas.png)
  4. - 你每行`grid-template-areas`的值都必须与`grid-template-columns`定义的单元数量一致。
  5. - 你可以用几个点号表示一个单独的空网格区域。
  6. - 注意：
  7.     - 你是在用这种方式命名**网格区域**，而不是**分隔线**。
  8.     - 实际上，当你用这种语法命名**网格区域**的时候，包裹这个区域两侧的**分隔线**会自动地获取这个命名。如果你的**网格区域**叫`foo`，那么这个**网格区域**开始的<u>列分隔线</u>和<u>行分隔线</u>都会叫作`foo-start`，而结束交汇的两根<u>行列分隔线</u>会叫做`foo-end`。这意味着有些线可能有很多名字，就如上面这个例子中，最左边的分隔线同时拥有三个名字：`header-start, main-start, footer-start`
  9. ## grid-template
  10. - 定义：`grid-template-rows`，`grid-template-columns`，`grid-template-areas`的单个声明形式。
  11. - 值：
  12.     - none：将三个属性都设为默认值
  13.     - subgrid：将`grid-template-rows`，`grid-template-columns`的值设为`subgrid`，`grid-template-areas`设为初始值
  14.     - \<grid-template-rows> / \<grid-template-columns>：给`grid-template-rows`，`grid-template-columns`一个特定的值，相应地，把`grid-template-areas`置为`none`
  15. ```css
  16. .container {
  17.   grid-template: none | subgrid | <grid-template-rows> / <grid-template-columns>;
  18. }
  • 这个属性也接受更加复杂但更方便的语法，例如：
    1. .container {
    2. grid-template:
    3.   [row1-start] "header header header" 25px [row1-end]
    4.   [row2-start] "footer footer footer" 25px [row2-end]
    5.   / auto 50px auto;
    6. }
    7. /* 等价于 */
    8. .container {
    9. grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
    10. grid-template-columns: auto 50px auto;
    11. grid-template-areas: 
    12.   "header header header" 
    13.   "footer footer footer";
    14. }

    grid-column-gap / grid-row-gap

  • 定义：定义网格线的大小。你可以认为这是在设置两个行/列之间空隙的宽度。
  • 值：
    • \：长度值
      1. .container {
      2. grid-column-gap: <line-size>;
      3. grid-row-gap: <line-size>;
      4. }
  • 示例：
    1. .container {
    2. grid-template-columns: 100px 50px 100px;
    3. grid-template-rows: 80px auto 80px; 
    4. grid-column-gap: 10px;
    5. grid-row-gap: 15px;
    6. }
    网格单元间距
  • 行列中才会有空隙，网格外部和边缘不会有这个间距

    grid-gap

  • 定义：grid-column-gap和grid-row-gap的缩写
  • 值：
    • \ \：长度值
      1. .container {
      2. grid-gap: <grid-row-gap> <grid-column-gap>;
      3. }
  • 示例：
    1. .container{
    2. grid-template-columns: 100px 50px 100px;
    3. grid-template-rows: 80px auto 80px; 
    4. grid-gap: 10px 15px;
    5. }
    如果grid-row-gap没有定义，那么就会等同grid-column-gap的值。

justify-items

  • 定义：沿X轴（行）对齐网格项，align-items则是沿Y轴（列）对齐。这个值会影响容器内的所有网格项。
  • 值：
    • start：将内容对齐到网格区域的左侧
    • end：将内容对齐到网格区域的右侧
    • center：将内容对齐到网格区域的中央
    • stretch：填满网格区域宽度（默认值）
      1. .container {
      2. justify-items: start | end | center | stretch;
      3. }
  • 示例：
    1. .container {
    2. justify-items: start;
    3. }
    左对齐
    1. .container{
    2. justify-items: end;
    3. }
    右对齐
    1. .container{
    2. justify-items: center;
    3. }
    居中对齐
    1. .container{
    2. justify-items: stretch;
    3. }
    拉伸
  • 这个行为可以由网格项属性justify-self自行定义

align-items

  • 定义：沿Y轴（列）对齐网格项，justify-items则是沿X轴（行）对齐。这个值会影响容器内的所有网格项。
  • 值：
    • start：将内容对齐到网格区域的顶部
    • end：将内容对齐到网格区域的底部
    • center：将内容对齐到网格区域的中央
    • stretch：填满网格区域高度（默认值）
      1. .container {
      2. align-items: start | end | center | stretch;
      3. }
  • 示例：
    1. .container {
    2. align-items: start;
    3. }
    顶部对齐
    1. .container {
    2. align-items: end;
    3. }
    底部对齐
    1. .container {
    2. align-items: center;
    3. }
    居中对齐
    1. .container {
    2. align-items: stretch;
    3. }
    拉伸
  • 这个行为可以由网格项属性align-self自行定义

justify-content

  • 定义：沿X轴（行）对齐网格容器内的网格，align-content则是沿Y轴（列）对齐。有时候你的网格总大小可能会小于网格容器的尺寸。尤其是网格项用非弹性单位（px）布局的时候，所以这个属性就派上用场了。
  • 值：
    • start：将网格对齐到网格容器的最左边
    • end：将网格对齐到网格容器的最右边
    • center：将网格对齐到网格容器的中间
    • stretch：将网格项的宽度调整为占满整个网格容器
    • space-around：将空余的空间平均分配在网格项中，左右两侧的空间只有这个平均值的一半
    • space-between：将空余的空间平均分配在网格项中，左右两侧的空间不会有剩余的空间
    • space-evenly：将空余的空间平均分配在网格项中，左右两侧的空间也等同这个值
      1. .container {
      2. justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    
      3. }
  • 示例：
    1. .container {
    2. justify-content: start;
    3. }
    左侧对齐
    1. .container {
    2. justify-content: end;
    3. }
    右侧对齐
    1. .container {
    2. justify-content: center;
    3. }
    居中对齐
    1. .container {
    2. justify-content: stretch;
    3. }
    拉伸
    1. .container {
    2. justify-content: space-around;
    3. }
    平均分布
    1. .container {
    2. justify-content: space-between;
    3. }
    平均分布
    1. .container {
    2. justify-content: space-evenly;
    3. }
    平均分布

    align-content

  • 定义：沿Y轴（列）对齐网格容器内的网格，align-content则是沿X轴（行）对齐。有时候你的网格总大小可能会小于网格容器的尺寸。尤其是网格项用非弹性单位（px）布局的时候，所以这个属性就派上用场了。
  • 值：
    • start：将网格对齐到网格容器的顶部
    • end：将网格对齐到网格容器的底部
    • center：将网格对齐到网格容器的中间
    • stretch：将网格项的高度调整为占满整个网格容器
    • space-around：将空余的空间平均分配在网格项中，上下两侧的空间只有这个平均值的一半
    • space-between：将空余的空间平均分配在网格项中，上下两侧的空间不会有剩余的空间
    • space-evenly：将空余的空间平均分配在网格项中，上下两侧的空间也等同这个值
      1. .container {
      2. align-content: start | end | center | stretch | space-around | space-between | space-evenly;    
      3. }
  • 示例：
    1. .container {
    2. align-content: start;    
    3. }
    顶部对齐
    1. .container {
    2. align-content: end;    
    3. }
    底部对齐
    1. .container {
    2. align-content: center;    
    3. }
    居中对齐
    1. .container {
    2. align-content: stretch;    
    3. }
    拉伸
    1. .container {
    2. align-content: space-around;    
    3. }
    平均分布
    1. .container {
    2. align-content: space-between;    
    3. }
    平均分布
    1. .container {
    2. align-content: space-evenly;    
    3. }
    平均分布

grid-auto-columns / grid-auto-rows

  • 定义：指定任何默认生成的网格轨道（不可见网格轨道）尺寸。当你用grid-template-rows/grid-template-columns指明行或列的位置，而且超出定义好的网格时就会产生不可见网格轨道
  • 值：
    • \：长度数值，百分比，fr单位
      1. .container {
      2. grid-auto-columns: <track-size> ...;
      3. grid-auto-rows: <track-size> ...;
      4. }
  • 为了学习不可见网格轨道是怎么产生的，我们来看看这个例子：
    1. .container {
    2. grid-template-columns: 60px 60px;
    3. grid-template-rows: 90px 90px
    4. }
    网格模板

这里产生了一个2x2的网格但是想象一下，其中的网格项是这样用grid-column和grid-row定位的：

  1. .item-a {
  2.   grid-column: 1 / 2;
  3.   grid-row: 2 / 3;
  4. }
  5. .item-b {
  6.   grid-column: 5 / 6;
  7.   grid-row: 2 / 3;
  8. }

不可见网格轨道我们让.item-b定位在第5，6根列分隔线之中，但是我们并没有定义第5，6根分隔线。由于我们引用了不存在的分隔线，宽度为0的不可见网格轨道就填充了这个间隙。我们可以用grid-auto-columns和grid-auto-rows指定这些不可见网格轨道的尺寸。

  1. .container {
  2.   grid-auto-columns: 60px;
  3. }

不可见网格轨道

grid-auto-flow

  • 定义：控制自动放置算法。如果你有不想指定位置的网格项，那么自动放置算法就会从中接手把它们排列好。
  • 值：
    • row：告诉自动放置算法将每行按顺序填满，有必要的话新增行
    • column：告诉自动放置算法将每列按顺序填满，有必要的话新增列
    • dense：如果后面产生的网格项比之前留下的空隙要小，自动放置算法会把这个空洞填满
      1. .container {
      2. grid-auto-flow: row | column | row dense | column dense
      3. }
  • 注意：dense可能会让你的网格呈现无序的状态
  • 示例：
    1. <section class="container">
    2.   <div class="item-a">item-a</div>
    3.   <div class="item-b">item-b</div>
    4.   <div class="item-c">item-c</div>
    5.   <div class="item-d">item-d</div>
    6.   <div class="item-e">item-e</div>
    7. </section>
    你定义了一个2行5列的网格，将grid-auto-flow设为row（也就是默认值）
    1. .container {
    2. display: grid;
    3. grid-template-columns: 60px 60px 60px 60px 60px;
    4. grid-template-rows: 30px 30px;
    5. grid-auto-flow: row;
    6. }
    此时，你只将其中两个网格项做了设置
    1. .item-a {
    2. grid-column: 1;
    3. grid-row: 1 / 3;
    4. }
    5. .item-e {
    6. grid-column: 5;
    7. grid-row: 1 / 3;
    8. }
    因为我们把grid-auto-flow设成了row，所以我们的网格看起来会是这样。注意我们没有进行定位的3个网格项（item-b，item-c，item-d）会这样排列在可用的行中。

自动放置算法

相反地，如果我们把grid-auto-flow设成了column，item-b，item-c，item-d会沿着列向下排列：

  1. .container {
  2.   display: grid;
  3.   grid-template-columns: 60px 60px 60px 60px 60px;
  4.   grid-template-rows: 30px 30px;
  5.   grid-auto-flow: column;
  6. }

自动放置算法

grid

  • 定义：下列属性的缩写形式：
    • grid-template-rows
    • grid-template-columns
    • grid-template-areas
    • grid-auto-rows
    • grid-auto-columns
    • grid-auto-flow
    • 也会把grid-column-gap，grid-column-gap设为初始值，即使这个属性不可以显式地设置这两个属性。
  • 值：
    • none：将所有包含属性设为初始值
    • \ / \：指定这两个值，其他子属性设为初始值
    • \ [\ [ / \] ]：相应地为这些属性设置特定值。如果漏了grid-auto-columns，那就会使用grid-auto-rows的值，如果这两个值都漏写了，就会设为它们的初始值
      1. .container {
      2. grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];
      3. }
  • 例子：```css.container {grid: 200px auto / 1fr auto 1fr;}

/ 等价于 /

.container { grid-template-rows: 200px auto; grid-template-columns: 1fr auto 1fr; grid-template-areas: none;}

  1. ```css
  2. .container {
  3.   grid: column 1fr / auto;
  4. }
  6. /* 等价于 */
  8. .container {
  9.   grid-auto-flow: column;
  10.   grid-auto-rows: 1fr;
  11.   grid-auto-columns: auto;
  12. }
  • 这个属性也能使用更复杂也更方便的语法。你可以指定grid-template-areas，grid-template-rows和grid-template-columns，并将所有其他子属性设为初始值。这么做可以在它们网格区域里相应地指定分隔线名字和轨道的大小，以下是一个简单的例子：```css.container {grid: [row1-start] “header header header” 1fr [row1-end]
    1.   [row2-start] "footer footer footer" 25px [row2-end]
    2.   / auto 50px auto;
    }

/ 等价于 /

.container { grid-template-areas: “header header header” “footer footer footer”; grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end]; grid-template-columns: auto 50px auto;}```