CSS学习之Grid网格布局基本概念、容器属性

网格布局

网格布局（Grid）是将网页划分成一个个网格单元，可任意组合不同的网格，轻松实现各种布局效果，也是目前CSS中最强大布局方案，比Flex更强大。

基本概念

容器和项目

当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid（设成行内元素） 后，它就变成了一个网格容器（container），这个元素的所有直系子元素将成为网格元素，称为项目（item）。

.box { 
  display: grid | inline-grid; 
}

设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align等设置都将失效。

行和列

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。

网格线

划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。
正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

单元格

行和列的交叉区域，称为"单元格"（cell）。 正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

图示中绿的背景为4个单元格，单元格各自有一个项目item。
注意：需要区分单元格和项目元素，比如一个3*3的九宫格，项目元素不一定就是9个，项目元素个数由开发者决定。

容器属性

grid-template-columns、 grid-template-rows

• grid-template-columns属性定义每一列的列宽
• grid-template-rows属性定义每一行的行高

1. 固定值 px

.container {
  display: grid;
  grid-template-columns: 50px 100px 50px;
  grid-template-rows: 50px 100px 50px;
}

2. 百分比 %

.container {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 50% 50%;
}

3. repeat()

重复写同样的值非常麻烦，尤其网格很多时。可以使用repeat()函数，简化重复的值。

将上面的代码用repeat()改写如下：

.container {
  display: grid;
  grid-template-columns: repeat(4,25%);
  grid-template-rows: repeat(2,50%);
}

repeat()接受两个参数

• 参数一：重复的次数（上例分别是列为4，行为2）
• 参数二：重复的值。

repeat()重复某种模式也是可以的。

.container {
  display: grid;
  grid-template-columns: repeat(2, 40px 60px 80px);
  grid-template-rows: repeat(2,50%);
}

上述代码是将列宽为40px、60px、80px重复2次；行高2行，等分容器的高度。

4. fr
   为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。

.container {
  width: 300px
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

同时，fr可以与绝对长度的单位结合使用，这时会非常方便。

.container {
  width: 300px
  display: grid;
  grid-template-columns: 1fr 100px 2fr
}

上面代码表示，第二列的宽度为固定的100px，第三列的宽度是第一列的2倍。

5. minmax()
   minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

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

上面代码表示，第三列的宽度不小于100px，不大于1fr。
6. auto
auto关键字表示由浏览器自己决定长度。

.container {
  width: 300px
  display: grid;
  grid-template-columns: 50px auto 50px;
}

上面代码中，第二列的宽度为容器宽度除第一、第三列的总宽度外所占最大的宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。

7. auto-fill、auto-fit
   auto-fill 与 auto-fit 直译为 自适应 与 自填充，一般用来实现自适应布局的。

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

auto-fill：

If the grid container has a definite or maximal size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container.

如果网格容器在相关轴上具有确定的大小或最大大小，则重复次数是最大可能的正整数，不会导致网格溢出其网格容器。

.container {
  width: 400px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px , 1fr));
}

auto-fit：

Behaves the same as auto-fill, except that after placing the grid items any empty repeated tracks are collapsed。

行为与 auto-fill 相同，除了放置网格项目后，所有空的重复轨道都将消失。简单来说，就是如果元素数量不够放满一行，则 auto-fit 会将元素平铺，铺满一行。

.container {
  width: 400px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px , 1fr));
}

8. 网格线名称
   grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
  grid-template-rows:    [r1] 100px [r2] 100px [r3] 100px [r4];
}

上述代码表示 3*3 的九宫格，4根垂直的网格线的名称分别是c1、c2、c3、c4；4根水平的网格线名称分别是：r1、r2、r3、r4。

同时网格布局允许同一根线有多个名字，比如：

grid-template-columns: [c1 c11 c111] 100px [c2 c22] 100px [c3] 100px [c4];