用户登录

除了可以设置网格容器的栏,也就是列,也可以设置网格的行。比如我们想把这个网格分成三行,可以在这个网格容器的上面,添加一个 grid-rows-3。

这个类用的是 grid-rows-template 属性,值用的是 repeat 函数,数字 3 表示重复三次,第二个参数用了一个 minmax 函数,最小值是 0,最大值是 1fr。 fr 表示 fraction,可以把它想成是份数。

在浏览器,用开发者工具,检查一下这个网格。现在这个网格会被分成三栏,三行。划分网格的行用了四条分割线,从上往下分别是 1,2,3,4。

比如现在我们想让 1 号盒子占用两行空间,在编辑器找到这个元素,在上面添加一个 row-start-1 ,再添加一个 row-end-3。

row-start-1 会把 gird-row-start 这个属性的值设置成 1,row-end-3 会把 grid-row-end 这个属性的值设置成 3。这样元素就会占用 1 号到 3 号分割线之间的行。

或者也可以不用设置具体的分割线,在 4 号盒子上面,添加一个 row-span-2,这个类用的是 grid-row 这个属性,这个属性是 grid-row-start 还有 grid-row-end 这两个属性的简写形式。 span 2 在这里的意思就是占用两行。

设置网格的行与项目占用的行《 Tailwind 样式框架:网格布局 》

统计

13228
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点