hooyantsing's Blog

P131_5_栅格绘制的基础知识

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

P131 5 栅格绘制的基础知识

grid-template-rows

给栅格容器画上行线。

1
2
3
//容器每行高100px
display: grid;
grid-template-rows: 100px 100px 100px;

grid-template-columns

给栅格容器画上列线。

1
2
3
4
5
//容器每行宽100px
display: grid;
grid-template-columns: 100px 100px 100px;
//按照百分比
grid-template-columns: 20% 20% 20% 20% 20%;

repeat(个数,高/宽度)

重复绘制函数。

1
2
3
4
//按照函数重复绘制
grid-template-columns: repeat(5,20%);
//按照函数重复绘制两遍[图1]
grid-template-columns: repeat(5,100px 50px);

图1

b4b4c4b982def0f9348f9c77891d178b.png

栅格元素不指定宽高

栅格元素自动填充满。

db0f1fa99ddfad95444d941dca398af6.png

栅格元素指定宽高

按照元素的尺寸并占用一个栅格。

aa8998044320c1d4d4b4629bbb224e65.png

CATALOG