容器属性

  • display: grid - 指定一个容器使用网格布局

  • grid-template-columns - 指定每一列的列宽
  • grid-template-rows - 指定每一行的行高
  • grid-template - 以上两个属性的简写

  • row-gap - 设置行与行的间隔（行间距）

  • column-gap - 设置列与列的间隔（列间距）

  • gap - 以上两个属性的简写形式 gap: <row-gap> <column-gap>


  • grid-template-areas - 定义区域

  • grid-auto-flow - 项目放置顺序；默认值是 row 表示先行后列， column表示先列后行


  • justify-items - 单元格内容的水平位置

  • align-items - 单元格内容的垂直位置

  • place-items - 以上两个属性的简写形式 place-items: <align-items> <justify-items>


  • justify-content - 整个内容区域在容器中的水平位置

  • align-centent - 整个内容区域在容器中的垂直位置

  • place-centent - 以上两个属性的简写形式 place-content: <align-content> <justify-content>

  • grid-auto-columns - 设置浏览器自动创建的多余网格的列宽

  • grid-auto-rows - 设置浏览器自动创建的多余网格的行高

项目属性

  • grid-column-start - 左边网格线所在的垂直网格线

  • grid-column-end - 右边网格线所在的垂直网格线

  • grid-column - 以上两个属性的简写形式 grid-column: <start-line> / <end-line>


  • grid-row-start - 上边网格线所在的水平网格线

  • grid-row-end - 下边网格线所在的水平网格线

  • grid-row - 以上两个属性的简写形式 grid-row: <start-line> / <end-line>


  • grid-area - 指定项目放在哪一个区域，

    也能用作简写形式 grid-area: <row-start> / <column-start> / <row-end> / <column-end>


  • justify-self - 设置单元格内容的水平位置

  • align-self - 设置单元格内容的垂直位置

  • place-self - 前面两个属性的简写形式 place-self: <align-self> <justify-self>

函数与关键字

  • repeat() - 用于简化重复值，该函数可以用于 grid-template-columns 和 grid-template-rows 

    1
    2
    3
    4
    5
    .container{
        display: grid;
        grid-template-rows: repeat(3, 100px 50px 100px);
        grid-template-columns: repeat(3, 100px);
    }

  • auto-fill - 自动填充至每行最大可容纳的单元格

    1
    2
    3
    4
    .container {
      display: grid;
      grid-template-columns: repeat(auto-fill, 100px);
    }

  • fr - grid 容器中的可变长度单位，按比例分配剩余空间，在grid-template-columns、grid-template-rows及相关属性中使用

    1
    2
    3
    4
    .container {
      display: grid;
      grid-template-columns: 150px 1fr 2fr;
    }

  • minmax() - 定义一个长度闭区间，接受两个参数，分别为最小值和最大值

    1
    grid-template-columns: 1fr 1fr minmax(100px, 1fr);

CSS Grid 网格布局教程 - 阮一峰