Grid布局（三）弹性计算

前言

上一章我们简单的介绍了Grid的基础使用，通过grid画出一个九宫格；
大部分情况下，我们的布局都不是固定宽高的，我们需要根据屏幕的宽度和高度来动态进行计算；
这种情况下，Grid布局中的弹性计算，就比较重要了；
本文主要以水平为例，其中垂直和水平相似；

本章节的代码，主要是上一章代码的稍微改动，所以下边的例子中不会粘贴所有的代码；

一、自动拉伸（auto）

.container {
  width: 50%;
  height: 500px;
  margin: auto;

  background-color: lightgray;
  display: inline-grid;
  // 使用auto代替原来的100px
  grid-template-columns: 100px auto 100px;
  grid-template-rows: 100px 100px 100px;
  align-content: center;
}

结果

这里设置了第二列的宽度为auto，那么项目元素中，第二列的元素的宽度，则会根据容器的宽度进行适当的拉伸；

二、比例（fr）

.container {
  width: 50%;
  height: 500px;
  margin: auto;

  background-color: lightgray;
  display: inline-grid;
  grid-template-columns: 100px 1fr 2fr;
  grid-template-rows: 100px 100px 100px;
  align-content: center;
}

结果

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。
如果两列的宽度分别为1fr和2fr，就表示后者是前者的2倍。

fr可以与绝对单位的长度结合使用，浏览器会帮助我们计算出合适的宽度；

三、自动填充（auto-fill）

.container {
  width: 50%;
  height: 500px;
  margin: auto;

  background-color: lightgray;
  display: inline-grid;
  // 使用repeat函数
  grid-template-columns: repeat(auto-fill, 100px);
  grid-template-rows: 100px 100px 100px;
  align-content: center;
}

结果

如果单元格的大小是固定的，但是容器的大固定，我们想一行中尽可能的放更多的元素，就可以使用auto-fill关键字，表示自动填充；

附注：repeat函数

有时候，我们需要重复写很动次相同的值，例如100px 100px 100px，这时候，我们可以使用repeat函数帮我们简化这一步骤；

// 第一个参数num：重复的次数
// 第二个参数val：需要重复的值
repeat(num, val)

例如：

repeat(3, 100px);  // 100px 100px 100px
repeat(2, 100px 80px 1fr); // 100px 80px 1fr 100px 80px 1fr

在Grid布局中的实际应用：

// grid-template-rows: 100px 100px 100px;
grid-template-rows: (3, 100px);