grid（栅格）

**grid**属性:显式网格属性：grid-template-rows、grid-template-columns、grid-template-areas，隐式网格属性：grid-auto-rows、grid-auto-columns、grid-auto-flow，间距属性：grid-columns-gap、grid-row-gap

grid-template-rows :

grid-template-columns :

间距

• row-gap
• column-gap
• gap （grid-gap）以上简写形式

grid中放置元素划小窗格

• 只可以是规则矩形范围

/* 划小窗格 */
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 4;

• 边线命名 【为了开辟一个空间】

  • 通用命名

  • .grid-item2 {
      display: grid;
      grid-template-rows: [r1-s] 100px [r1-e r2-s] 100px [r2-e r3-s] 100px [r3-e];
      grid-template-columns: [c1-s] 100px [c1-e c2-s] 100px [c2-e c3-s] 100px [c3-e];
    }
    
    .grid-item2 > div:nth-child(1) {
      grid-row-start: r2-s;
      grid-row-end: r2-e;
      grid-column-start: c2-s;
      grid-column-end: c2-e;
      background-color: #5352ed;
    }

  • repeat

  • .grid-item3 {
      display: grid;
      grid-template-rows: repeat(3, [r-s] 1fr [r-e]);
      grid-template-columns: repeat(3, [c-s] 1fr [c-e]);
    }
    
    .grid-item3 > div:nth-child(1) {
      grid-row-start: r-s 2;
      grid-row-end: r-e 2;
      grid-column-start: c-s 2;
      grid-column-end: c-e 2;
      background-color: #5352ed;
    }

  • 在线 demo

窗格偏移

• .grid-item4 > div:nth-child(1) {
    grid-row-start: 2;
    grid-column-start: 2;
    /* grid-column-end: span 1; */
    grid-row-end: span 1;
    /* or */
    background-color: #5352ed;
  }

• grid-row-* 与 grid-column-* 的简写

  • .grid-item4 > div:nth-child(1) {
      grid-row: 3/4;
      /* 数值指的是线序 */
      grid-column: 3/4;
      /* grid-row: 2/span 1;
                grid-column: 2/span 1; */
      background-color: #5352ed;
    }

  • .grid-item4 > div:nth-child(1) {
      grid-area: 2/2/3/3;
      /* 等价于 */
      /* grid-row-start: 2;
                grid-row-end: 3;
                grid-column-start: 2;
                grid-column-end: 3; */
      /* 等价于 */
      /* grid-row: 2/span 1;
                grid-column: 2/span 1; */
    }

  • grid-area 特性 [结合区域命名使用grid-template-areas]

  • grid-template-are 与 grid-area 结合使用案例在线 demo

  • grid-template-areas: "header header" "nav main" "footer footer";
    /* 默认生成边线名称 header-start header-end .... */
    /* 可在 grid-area 中 划分窗格 */
    /* 最简单的方式 将一个区域 搞成相同的名字 直接使用命名 划分窗格 */
    /* 不需要命名的区域 用.站位 */
    header {
      grid-area: header;
    }
    nav {
      grid-area: nav;
    }
    main {
      grid-area: main;
    }
    footer {
      grid-area: footer;
    }

栅格的排列方向

• grid-auto-flow ：row | column dense （强制填充中间空余区域，填补前面的空白区域）

对齐方式

• justify-content: start;
  /* 与flexible 取值一直的*/
  align-content: start;
  justify-items: center;
  align-items: center;
  /* item元素控制 */
  justify-self: start;
  align-self: start;
  
  /* 简写 */
  place-content: ;
  place-items: ;
  place-self: ;