GRID布局

兼容性

IE10 IE11 支持老的语法
目前大多数的浏览器实现了支持, 或者停留在实验特性

基本概念

Grid Container 网格容器
Grid Item 网格项
Grid Line 网格项
Grid Track 网格轨道
Grid Cell 网格单元
Grid Area 网格区

Container的属性

定义在容器的属性 display grid-template-columns grid-template-rows grid-template-areas grid-column-gap grid-row-gap grid-gap justify-items align-items justify-content align-content grid-auto-columns grid-auto-rows grid-auto-flow grid

• display

    grid                生成块级网络
    inline-grid         生成行内网络
    subgrid             作为网格项需要继承父网格的行列大小

• grid-template-columns grid-template-columns 设置行和列的大小

    grid-template-columns: 40px 50px auto 50px 40px ;
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
      // line-name track-size line-name 在行轨道或列轨道两边是网格线
    grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];  // 网格线double name
    grid-template-columns: repeat(3, 20px [col-start]) 5%;  // 等价于下面的表达
    grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
    grid-template-columns: repeaat(3, 1fr);  // 将容器分为三等份
    grid-template-columns: 1fr 50px 1fr 1fr;  // fr 的行列将划分剩余部分

• grid-template-areas

  通过获取网格项中的grid-area属性值（名称），来定义网格模版。重复网格区（grid-area）名称将跨越网格单元格，‘.’代表空网格单元

    .container {
      display: grid;
      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"
    }
    .item-a{
      grid-area: header;
    }
    .item-b{
      grid-area: main;
    }
    .item-c{
      grid-area: sidebar;
    }
    .item-d{
      grid-area: footer;
    }
  

• grid-gap: grid-row-gap 和 grid-column-gap 的简写

• justify-items
  垂直于列网格线对齐

    start end center stretch(默认)

• align-items
  垂直于行网格线对齐

    start end center stretch

• justify-content
  使用px等非弹性单位定义, 总网格区域大小可能会小于网格容器, 设置网格横向对其方式

    start           顶部对齐
    end             底部对齐
    center          居中对齐
    stretch         填满网格容器
    space-around    网格项两边间距相等，网格项之间间隔是单侧的2倍
    space-between   两边对齐, 网格项之间间隔相等
    space-evenly    网格项间隔相等
  

• align-content

• grid-auto-columns grid-auto-rows
  自动生成隐式网格轨道, 当定位网格超出网格容器的范围时, 将自动创建隐式网络轨道

• grid-auto-flow

    row         按照行依次从左到右排列
    column      按照列依次从上到下排列
    dense       按先后顺序排列
  

• grid

    grid: 200px auto / 1fr auto 1fr;
  

Item的属性

grid-column grid-column-start grid-column-end 的缩写
grid-row grid-row-start grid-row-end 的缩写
grid-area 父容器定义的 grid-template-areas
justify-self
align-self

• justify-self 定义单个网格项垂直于列网格线的对齐方式

  start:        网格区域左对齐
  end:          网格区域右对齐
  center:       网格区域居中
  stretch:      网格区域填满(默认)

• align-self 定义单个网格项垂直于行网格线的对齐方式