hooyantsing's Blog

P133_7_自动填充与按比例划分栅格

字数统计: 102阅读时长: 1 min
2020/04/20

P133 7 自动填充与按比例划分栅格

*repeat(个数,高/宽度)*

重复绘制函数。

自动填充

auto-fill自动填充,不用指定行/列数。

db7bc83e655adb13acf30beb939e862b.png

1
2
3
display: grid;
grid-template-rows: repeat(auto-fill,100px);
grid-template-columns: repeat(auto-fill,100px);

按比例

fr,代表比例。

1
2
3
4
//等比例
display: grid;
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);

例:

091bd76d32c78da25160fbd535cccf0a.png

1
2
3
display: grid;
grid-template-rows: 1fr 2fr 1fr;
grid-template-columns: 1fr 2fr 1fr;
CATALOG