网格布局:Grid

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

用 CSS 提供的网格系统可以处理复杂的布局。要使用 CSS 的网格布局,我们可以先把一个元素设置成网格容器,这样它里面直接包装的子元素就是这个网格里的项目。

在这个白色背景的元素上面,添加 tailwind 框架提供的 grid 这个类,它会把元素的 display 属性的值设置成 grid,这样这个元素就会是一个网格容器,它里面包装的元素就是这个网格里的项目。

我们可以设置一下网格项目的间隔,添加一个 gap-4,它会把 gap 属性设置成 1rem,换算成像素就是 16 像素。现在项目之间会有 16 像素的间隔。

下面可以再设置一下这个网格的栏目的模板,比如我们打算把这个网格分成三栏,在这个网格容器的上面,添加一个 grid-cols-3 。它会把网格分成三栏,默认容器里三个项目会各占用一栏。

这个类就是用 grid-template-columns 设置了一下网格的栏目,这里用了一个 repeat 函数,第一个参数是重复的次数,第二个参数是栏目的大小,这个大小值用了一个 minmax 函数,最小值是 0,最大值是 1fr。这个 fr 是一种用在网格上的长度单位,它表示的是 fraction。 1fr 可以想成是一份。

也说是这里我们就是把这个网格容器分成了三栏,每一栏的宽度就是去掉网格间隔以后的网格容器的 1/3 。

复制一组这几个网格项目元素,修改一下元素包装的数字值,4,5,6 。 保存一下文件。 现在你会发现,网格里的这些项目会分成两排显示,每一排显示三个项目,因为网格一共有三个栏目,每个项目占用其中的一栏,排不开的项目会自动换到下一行显示。

网格布局:Grid《 Tailwind 样式框架:网格布局 》

统计

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

社会化网络

关于

微信订阅号

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