用户登录

在浏览器,打开浏览器的开发者工具,Elements 选项卡,然后选中这个网格容器,点一下这里的 grid。 你会发现有些数字小标签,这些数字表示的是分割网格用的线。

这里我们把这个网格容器分成了三栏,所以需要用到四条垂直的线来划分这个网格,从左往右,分别是,1,2,3,4。 利用这些分割线,可以设置网格项目占位的栏或者行。

比如想让这个 1 号盒子占用两栏的空间,可以把 1 号线到 3 号线之间的空间交给这个 1 号盒子。

在编辑器,找到这个 1 号盒子的元素,在上面先添加一个 col-start-1,再添加一个 col-end-3。 现在 1 号线到 3 号线之间的栏都会划给 1 号盒子。

col-start-1 这个类就是把元素的 grid-column-start 这个属性的值设置成了 1,col-end-3 就是把元素的 grid-column-end 这个属性的值设置成了 3。

span

我们也可以不用设置具体的分割线编号,比如想让 4 号盒子占用两栏的空间,可以在这个元素上面,添加一个 col-span-2。现在 4 号盒子会占用网格里的两个栏。

这个类设置的是 grid-column 这个属性的值,这个属性是 grid-column-start 还有 grid-column-end 这两个属性的简写形式。

它的值分成了两部分,中间用斜线分隔开,斜线左边设置的是 grid-column-start ,斜线右边设置的是 grid-column-end。

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

统计

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

社会化网络

关于

微信订阅号

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