grid布局
gap属性能解决flex多行布局中最后一行布局不满时位置偏移的问题
阮一峰的grid布局教程
网格布局 将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。
具体么 目前还没有使用过 最近没有用上 没找到合适的应用场景
跟flex布局有一定的相似性
display 属性
display: grid指定一个容器采用网格布局。
grid-template-columns 属性,
grid-template-rows 属性
容器指定了网格布局以后,接着就要划分行和列。grid-template-columns属性定义每一列的列宽,grid-template-rows属性定义每一行的行高。
repeat()
有时候,重复写同样的值非常麻烦,尤其网格很多时。这时,可以使用repeat()函数,简化重复的值。
repeat()接受两个参数,第一个参数是重复的次数(上例是3),第二个参数是所要重复的值。
auto-fill 关键字
有时,单元格的大小是固定的,但是容器的大小不确定。如果希望每一行(或每一列)容纳尽可能多的单元格,这时可以使用auto-fill关键字表示自动填充。
fr 关键字
为了方便表示比例关系,网格布局提供了fr关键字(fraction 的缩写,意为”片段”)。如果两列的宽度分别为1fr和2fr,就表示后者是前者的两倍。
minmax()
minmax()函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值。
auto 关键字
auto关键字表示由浏览器自己决定长度。
网格线的名称
grid-template-columns属性和grid-template-rows属性里面,还可以使用方括号,指定每一根网格线的名字,方便以后的引用。