CSS网格布局

网格容器

• display设置为grid时，网格按行排列，宽度自动占满整个屏幕
• display设置为inline-grid时，网格按行排列，宽度为元素本身宽度

    .box1 {
      display: grid;
    }

    .box2 {
      height: 50px;
      background-color: aquamarine;
      margin-bottom: 10px;
    }

    .box1 {
      display: inline-grid;
    }

    .box2 {
      height: 50px;
      width: 200px;
      background-color: aquamarine;
      margin-bottom: 10px;
    }

显示网格

• 属性grid-template-rows和grid-template-columns用于显示定义网格，分别用于定义行轨道和列轨道。

    .box1 {
      display: grid;
      grid-template-rows: 50px 60px 70px;
    }

    .box2, .box4 {
      background-color: aquamarine;
      margin-bottom: 10px;
    }

    .box1 {
      display: grid;
      grid-template-columns: 30px 60px 90px;
    }

    .box2, .box4 {
      height: 50px;
      background-color: aquamarine;
      margin-right: 10px;
      margin-bottom: 10px;

• 在定义轨道尺寸时，可以使用单位fr，代表按比例分配空间
• 当fr与其他单位一起使用时，默认先让其他单位先分配空间，最后分配fr单位的空间

    .box1 {
      display: grid;
      /*先分配25%与350px,剩余的部分为1fr分配的空间*/
      grid-template-columns: 50% 1fr 350px;
    }

    .box3 {
      display: grid;
      /*默认按照1:2分配空间*/
      grid-template-columns: 1fr 2fr;
    }

    .box2, .box4 {
      height: 50px;
      background-color: aquamarine;
      margin-right: 10px;
      margin-bottom: 10px;
    }

轨道的最小最大尺寸设置

• 使用函数minmax()设置轨道边界的最小值与最大值。传入两个参数，第一个为最小值，第二个为最大值，最大值可以为auto，按照内容自动变化最大值

重复的网格轨道

• 函数repeat()用来定义重复的网格轨道，接受两个参数，第一个为重复网格轨道的数量，而第二个参数用来设置网格轨道的属性

定义网格间隙

• 属性grid-column-gap 和 grid-row-gap用于定义网格间隙，分别对应列轨道之间的间隙与行轨道之间的间隙
• 使用grid-gap是grid-row-gap和grid-column-gap的简写形式，第一个参数是行轨道间隙，第二个参数是列轨道间隙
• 只有一个参数则代表行轨道间隙与列轨道间隙相同

    .box1 {
      display: grid;
      grid-template-columns: 1fr 1fr 2fr;
      grid-template-rows: 100px 50px;
      grid-gap: 15px 30px;
    }
    
    .box2 {
      background-color: aquamarine;
    }

用网格线编号定位项目

• 网格线在grid定位中分别用来区分行与列，从上至下，从左至右，每条网格线都有一个编号，从1逐渐递增
• 使用grid-row-start定义项目从上到下的特定网格线开始， grid-row-end特定的网格线结束。属性grid-row 是 grid-row-start 和 grid-row-end的简写形式
• 使用grid-column-start定义项目从左到右的特定网格线开始， grid-column-end特定的网格线结束。属性grid-column 是 grid-column-start 和 grid-column-end的简写形式
• 在简写方式下，如果只指定一个值，它表示 grid-row-start或者column-start，如果传入两个值，必须使用/，分别代表开始与结束
• 也可以使用grid-row与grid-column来进行多行或者多列项目的合并，只要开始与结束占据多行或者多列

    .box1 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 100px 100px;
      grid-gap: 15px 30px;
    }

    .box2 {
      background-color: aquamarine;
    }

    .box2:first-child {
      grid-row: 2;
      grid-column: 2/3;
    }

• 使用关键字span来进行多行多列的合并

    .box2:first-child {
      grid-row: 1 / span 2;
      grid-column: span 2;
    }

网格线命名

• 对网格线命名使用[]，对网格线命名之后，使用grid-row与grid-column时可以直接使用命名好的网格线对项目进行定位
• 除了可以使用命名网格线来进行项目的定位之外，也可以使用命名好的网格线进行重复定义，使用repeat()函数实现
• 命名网格线使用grid-template-rows与grid-template-columns，按照网格线与项目宽度和高度进行同时命名
• 例如：

grid-template-rows: [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-end];    
grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-end];

用网格区域命名和定位项目

• 属性grid-template-areas给网格区域命名。网格区域名称可以用来定位网格项目。使用双引号来命名网格区域
• 在网格区域命名之后，可以直接使用grid-row与grid-column来对项目进行定位
• 也可以直接使用grid-area来定位项目，而值为之前重新命名过的网格区域

隐式网格

• 隐式网格可以通过属性 grid-auto-rows, grid-auto-columns, 和 grid-auto-flow 来定义
• grid-auto-rows代表隐式网格的行的高度，grid-auto-columns代表隐式网格列的宽度，而grid-auto-flow代表方向，可以为row，也可以为column

隐式命名的网格区域与网格线

• 对于网格区域的隐式命名，实在显示命名的基础上，对网格线进行命名时按照一定的格式来命名，就可以自动形成一个隐式命名的网格区域
• 对于隐式网格区域来说，在区域的行与列的开始网格线后添加-start，在区域的行与列的结束网格线后添加-end，这样就形成了一个隐形命名的网格区域

grid-template-rows: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end];    
grid-template-columns: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end];
/*形成了两个隐式命名的网格区域，分别为outer与inner*/

• 对于隐式命名的网格线来说，只要命名好了一个网格区域，只要在相应位置添加上-start与-end，就形成了隐式命名的网格线
• 与隐式命名的网格区域类似，命名好网格区域，在网格区域四周的网格线上回自动添加上相应的-start与-end，这样就形成了四条隐式命名的网格线

层叠网格

• 有时会出现同时有多个网格区域发生重叠现象，后面的网格会覆盖掉之前的网格，为了避免这种情况，设置z-index属性来实现特定的项目优先显示在上面

网格项目对齐方式

• 属性justify-items 和 justify-self 以行轴为参照对齐项目，属性align-items 和 align-self 以列轴为参照对齐项目
• 值可以为auto、normal、start、end、center、stretch、baseline、first baseline、last baseline

网格轨道的对齐方式

• 使用justify-content与align-content来对整个网格区域进行对齐，分别对应以行轴为参照与以列轴为参照
• 其中值分别为：start:左对齐、end：右对齐、center：居中对齐stretch：填充、
  space-around：在每个网格子项中间放置均等的空间，在始末两端只有一半大小、
  space-between：两边对齐，在每个网格子项中间放置均等的空间，在始末两端没有空间、space-evenly：网格间隔相等，包括始末两端