Grid-layout

Grid-layout基础用法

• grid就是二维的flex，能理解吧

• 如果设置了grid布局，容器内float、table-cell等将失效

  // 九宫格布局
  display: grid/inline-grid;
  grid-template-columns/rows: repeat(3/autofill, 100px);

• 均分用autofill自动填充

• 1fr、2fr代表是前面的一倍、两倍
• 取值范围minmax(100px, 1fr)
• justify-items、align-items、place-items跟flex一样 或者 justify-self、align-self、place-self跟前面效果一样
• justify-content、align-content、place-content跟flex一样-

Grid-layout高级用法

• 指定每跟网络线名字

  grid-template-columns: [c1] 10px [c2] 10px [c3] 10px [c4] auto
  grid-template-rows: [r1] 10px [r2] 10px [r3] 10px [r4] auto

• 妈妈我要变成bootstrap可以嘛？当然可以

  grid-template-columns: repeat(12, 1fr)
    or
  grid-template-rows: repeat(12, 1fr)

• 设置行列间隔

  grid-row-gap: 10px;
  grid-columns-gap: 20px;
    or
  grid-gap: 10px 20px;

• 指定一个区域由单元格组成

  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i'

• 先行后列？or 先列后行？

  grid-auto-flow: rows dense; //dense 尽量填充满空格