CSS grid 的用法

grid 的用法

加三个宽度为 200px 的列。

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

• 用 fr 这个单位来灵活地定义网格的行与列的大小。grid-template-columns: 2fr 1fr 1fr; > grid-template-columns: 300px 2fr 1fr，那么第一列宽度是 300px，剩下的两列会根据除去 300px 后的可用空间按比例分配。
• grid-column-gap 属性来定义列间隙；使用 grid-row-gap 来定义行间隙；使用 grid-gap 可以同时设定两者。grid-gap: 20px;
• 可以使用 repeat 来重复构建具有某些宽度配置的某些列。grid-template-columns: repeat(3, 1fr);
• 和之前一样，你仍然得到了 3 个 1fr 的列。第一个传入 repeat 函数的值（3）表明了后续列宽的配置要重复多少次，而第二个值（1fr）表示需要重复的构建配置，这个配置可以具有多个长度设定。
• 例如 repeat(2, 2fr 1fr)，这相当于填入了 2fr 1fr 2fr 1fr。
• grid-template-columns: 2fr repeat(5, 1fr);除了第一列以外全为 1fr，第一列为 2fr
• grid-template-columns: 500px repeat(5, 1fr);除了第一列以外五等分，第一列为 500px
• 溢出处理

grid-template-columns: 500px repeat(5, 200px);
overflow: auto;

grid 高级用法

• 同行同列高度一样，这是局限。
• grid-auto-rows: 100px;设置固定行高，内容过多会溢出，但是这样不好
• grid-auto-rows: minmax(100px, auto);行高最小值 100px，内容过多会自适应
• grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));auto-fill：宽度足够宽的话，尽可能显示多的列。能重复多少次就重复多少次。（代替原来 repeat 的那个数字）

.grid-four {
  width: 800px;
  margin: 50px auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: minmax(100px, auto);
  grid-auto-rows: minmax(50px, auto);
  grid-gap: 20px;
}

• 显式网格是我们用 grid-template-columns 或 grid-template-rows 属性创建的，而隐式网格则是当有内容被放到网格外时才会生成的。
• template 管显式，auto 管隐式
• grid-template-area： 'header header header’随意设置网格里块内容的位置。

---