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-columnsgrid-template-rows 属性创建的,而隐式网格则是当有内容被放到网格外时才会生成的。
  • template 管显式,auto 管隐式
  • grid-template-area: 'header header header’随意设置网格里块内容的位置。