Grid 布局

display

• 含义：指定一个容器采用网格布局
• 取值范围：
  • grid：网格布局
  • inline-grid：行内元素

grid-template-columns

• 含义：定义每一列的列宽

• 取值范围：

• 数值

  grid-template-columns: 100px 100px;
  

• 百分比：

  grid-template-columns: 50% 50%;
  

• repeat 函数：repeat 函数接收两个参数，第一个是重复的次数，第二个是重复的值

  grid-template-columns: repeat(2, 50%);
  

• auto-fill：当单元格大小确定，容器大小不确定时，使用 auto-fill 关键字表示自动填充

  grid-template-columns: repeat(auto-fill, 100px);
  

• fr：fraction 的缩写，意为“片段”，如列宽分别为 1fr 和 2fr，即表示后者是前者的两倍

  grid-template-columns: 1fr 2fr;
  

• minmax 函数：表示列宽不小于 100px，不大于 1fr

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

• auto：表示由浏览器自己决定宽度

  template-columns: 100px auto 100px;
  

grid-template-rows

• 含义：定义每一行的高度
• 取值范围：同 grid-template-columns

column-gap

• 含义：设置列间距

  column-gap: 10px;
  

row-gap

• 含义：设置行间距

  row-gap: 10px;
  

gap

• 含义：同时设置行间距和列间距

  gap: 10px 10px;
  

grid-auto-flow

• 含义：设置网格子元素的放置顺序
  • row：默认值，先行后列
  • column：先列后行
  • row dense： 先行后列，尽可能填满
  • column dense： 先列后行，尽可能填满

  grid-auto-flow: column;
  

justify-content

• 含义：整个内容区域在容器里的水平位置
• 取值范围：
  • start：对齐容器的起始边框
  • end：对齐容器的结束边框
  • center：容器居中对齐
  • stretch：项目大小没有指定时，拉伸占据整个网格容器
  • space-around：项目之间的间隔为 n，项目与容器边框的间隔为 n/2
  • space-between：项目之间的间隔为 n，项目与容器边框的间隔为 0
  • space-evenly：项目之间的间隔为 n，项目与容器边框的间隔为 n

  justify-content: center;
  

align-content

• 含义：整个内容区域在容器里的垂直位置
• 取值范围：同justify-content

  align-content: center;
  

place-content

• 含义：align-content和justify-content属性的合并简写形式

  place-content: center center;
  

justify-items

• 含义：设置单元格内容的水平对齐位置
• 取值范围：
  • start：对齐单元格的起始位置
  • end：对齐单元格的结束位置
  • center：单元格内部居中
  • stretch：拉伸，占满单元格（默认值）

  justify-items: center
  

align-items

• 含义：设置单元格内容的垂直对齐位置
• 取值范围：同justify-items

  align-items: center
  

place-items

• 含义：align-items和justify-items属性的合并简写形式

  place-items: center center