# 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,且这个值大于最大宽度。