用户登录

这里我设计了一个两栏两行的网格,grid-cols-2 可以把网格分成两栏,grid-rows-2 可以把网格再分成两行。现这个网格里有六个项目,这样在这个网格里,排完 1,2,3,4 这几个项目以后,还剩下 5,6 这两个项目。

浏览器会自动排列这些剩下的项目,默认会创建新的行,然后排列剩下的这些网格项目。在这个网格容器上面添加一个 grid-flow-row,它会把 grid-auto-flow 设置成 row,这是默认的值,也就是在新的行排列剩下的项目。

这里可以再试一下 grid-flow-col,它会把 grid-auto-flow 设置成 column,意思就是用网格的栏自动排列剩下的网格项目。

你会发现,现在会在新的栏,排列 5,6 这两个项目。

用 grid-auto-columns 这个 css 属性可以设置这些自动排列的项目的栏的大小。在网格容器上面添加一个 auto-cols-fr,它会把 grid-auto-columns 这个属性的值,设置成 minmax,0,1fr。这样这些自动排列的项目的宽度跟正常排列的项目是一样的。

设置自动排列的网格项目《 Tailwind 样式框架:网格布局 》

统计

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

社会化网络

关于

微信订阅号

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