CSS grid布局

Grid是二维布局，将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

基础概念

grid容器：采用grid布局的元素；
grid项目：容器中的所有直接子元素（不包括后代子元素）；grid布局只对项目生效；
单元格：行和列的交叉区域；n条横向网格线和n条竖向网格线可以生成(n-1)*(n-1)个单元格；
网格线：划分行和列的线；n行由n+1条横向网格线分隔成，n列由n+1条竖向网格线分隔成；

容器属性

• display
  display：grid； 该元素为grid容器（使用grid布局）（容器元素为块级元素）
  display: inline-grid; 容器元素为行内块元素（可以与其他元素放置在同一行）

注:设为网格布局以后,项目的float、display: inline-block、display: table-cell、vertical-align和column等设置都将失效。

• grid-template-columns ，grid-template-rows
  定义每一列的列宽和每一行的行高；
  属性值为每一行或列的高度或宽度（绝对值或百分比）

   .container {
     display: grid;
     grid-template-columns: 100px 100px 100px;
     grid-template-rows: 33.33% 33.33% 33.33%;
   }//三行三列，行高为100px，列宽为100px;
  

repeat(重复的个数，重复的值) 简化重复的值

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 33.33%); //重复3次，值为33.33%
} 

grid-template-columns: repeat(2, 100px 20px 80px); //将列宽为100px 20px 80px重复两次，即为六列

auto-fill 单元格大小固定，容器大小不确定时，放置单元格的个数不能确定。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
} //容器中尽可能多的放置列宽为100px的单元格

fr 关键字 表示倍数关系

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
} //将容器分为两列，第二列为第一列宽度的二倍

fr与绝对宽度一起使用

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
} //第一列宽度为150px,剩下两个自适应，第三列宽度为第二列的二倍

minmax()