用 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 。 保存一下文件。 现在你会发现，网格里的这些项目会分成两排显示，每一排显示三个项目，因为网格一共有三个栏目，每个项目占用其中的一栏，排不开的项目会自动换到下一行显示。