行列划分
grid-template-rows: 200px 200px 200px;
grid-template-columns: 200px 200px 200px
使用固定值
grid-template-rows: 200px 200px 200px;
grid-template-columns: 200px 200px 200px
使用百分比
grid-template-rows: 33.33% 33.33% 33.33%;
grid-template-columns: 33.33% 33.33% 33.33%
repeat
grid-template-rows: repeat(3,33.33%);
grid-template-columns: repeat(3,33.33%)
3:分成多少行/列
33.33%:每行/列占比
repeat auto-fill
grid-template-rows: repeat(auto-fill,33.33%);
grid-template-columns:repeat(auto-fill,33.33%);
auto-fill:自动撑满
fr 片段
grid-template-rows: 1fr 2fr 3fr;
grid-template-columns:1fr 2fr 3fr;
fr:分段,类似弹性布局 flex:1
minmax
grid-template-rows: minmax(100px,2