grid布局

概念

• 容器
• 项目

一旦给某个容器设置了grid布局，则它就是一个容器，它里面的直接子元素就是项目

行、列、网格线、单元格

设置多少列 / 行，每一 列 / 行的宽 / 高度：

grid-template-columns / grid-template-rows
常见取值
px、%、fr、auto、repeat(重复次数，模式)
示例：
grid-template-columns: 200px 200px 200px 200px;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-columns: 1fr 2fr;
grid-template-columns: repeat(2, 1fr 2fr 3fr);

两栏布局，左边固定200px, 右边自由伸展 (3种方法)：

      grid-template-columns: 200px auto;
      grid-template-columns: 200px 1fr;
      grid-template-columns: 200px calc(100% - 200px);

列 / 行间距

grid-column-gap / grid-row-gap
grid-column-gap: 30px;
grid-row-gap: 30px;

设置 单元格 内容的对齐方式

image.png

• 设置所有单元格内容的对齐方式
  justify-items / align-items 水平对齐 / 垂直对齐
  常见取值：start、center、end、stretch
  水平居中，垂直对齐的实现：
  justify-items: center;
  align-items: start;
  以上相当于： place-items: start center;
  place-items: start center; 相当于 align-items 和 justify-items 的组合

  
  image.png

• 设置某个单元格内容的对齐方式
  align-self
  justify-self

设置 整个内容区域 在容器里面的对齐方式

justify-content: center;
align-content: center;
常见取值：start、center、end、space-between、space-around、space-evenly、stretch

image.png

给单元格设置名称

不需要名字的区域可以设置其名称为 '.'，
需要注意的是，必须严格按照行数和列数来定义，
例如3 * 3，但实际上只有8个项目，那也必须设置最后一个单元格的命名

grid-template-areas: 'a a c'
                                 'd e .'
                                 'g h i';

控制单元格的自定义位置

• 方式一：使用网格线索引下标

    .item:nth-child(5) {
      grid-row-start: 1;
      grid-row-end: 3;
      grid-column-start: 1;
      grid-column-end: 2;
    }

image.png

• 方式二：使用命名的网格区域

    .item:nth-child(5) {
      grid-row-start: a-start;
      grid-row-end: a-end;
      grid-column-start: c-start;
      grid-column-end: c-end;
    }

以上可以简写为：

    .item:nth-child(5) {
      grid-row: a;
      grid-column-start: a-start;
      grid-column-end: a-end;
    }

进一步简写为：

    .item:nth-child(5) {
      grid-row: a;
      grid-column: a;
    }

最后简写为：

    .item:nth-child(5) {
      grid-area: a;
    }

image.png

水平垂直居中

      grid-template-columns: 1fr;
      grid-template-rows: 1fr;

      justify-items: center;
      align-items: center;