# Grid网格布局

# 属性使用

display: grid

指定一个容器采用网格布局

// 块级元素
div {
  display: grid;
}
// 行内元素
div {
  display: inline-grid;
}

grid-template-columns

属性定义每一列的列宽

grid-template-rows

属性定义每一行的行高

div{
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 200px 200px 200px;
}

上面代码指定了一个三行三列的网格,列宽和行高都是200px。
在grid中除了可以使用绝对单位也可以使用相对单位(百分比,rem)

repeat()函数

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

div{
  display: grid;
  grid-template-columns: repeat(3,200px);
  grid-template-rows:  repeat(3,200px);
}

参数一:重复的次数
参数二:所要重复的值

在 repeat()中也可以这样重复

div{
  display: grid;
  grid-template-columns: repeat(3,200px 100px 300px);
  grid-template-rows:  repeat(3,200px 100px 300px);
}

以上代码的含义是:形成九宫格,1、4、7宽高200,2、5、8宽高100,3、6、9宽高300

auto-fill 关键字

单元格的大小是固定的,但是容器的大小不确定。如果希望每一行(或每一列)容纳尽可能多的单元格,这时可以使用auto-fill关键字表示自动填充。

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

以上代码的含义是:每列宽度100px,然后自动填充,直到容器不能放置更多的列。

fr 关键字

网格布局提供了fr关键字(fraction 的缩写,意为"片段")。如果两列的宽度分别为1fr和2fr,就表示后者是前者的两倍。

div{
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
}

以上代码的含义是:第一列宽100px,第二列是第三列的二分之一

minmax() 函数

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

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

上面代码中,minmax(100px, 1fr)表示列宽不小于100px,不大于1fr。

auto 关键字

auto关键字表示由浏览器自己决定长度。

grid-template-columns: 100px auto 100px;

上面代码中,第二列的宽度,基本上等于该列单元格的最大宽度,除非单元格内容设置了min-width,且这个值大于最大宽度。