如何在 tailwind 中使用网格创建完美的组件 CSS

Question

你好，希望你一切都好。 我是 tailwind CSS 的新手，需要您的帮助。 我要在 tailwind CSS 中创建一个网格。我创建了一个 div 作为父级，并将所有子级放入其中。 根据我的任务，我有 4 行和 4 列。 我正在分享我到目前为止所做的代码。

所以我有两个问题：

1. 当我调整浏览器的大小时，断点 767-640 md 最后两行 go 超出了边框框。
2. 其次，颜色为 border-secondary-400 的第一行被占用 row-start-1 row-span-3 与下一行中的其他框对齐？

任何最好的想法如何解决这个问题？ 在此先感谢您的帮助。

Answer 1

我不太确定为什么你不会立即使用 4 列并让父容器将 grid-cols-4 和 grid-rows-4 作为类，使用 justify-items-center 和 items-center 你可以确保所有项目完美对齐。

然后当涉及到每个 div 本身时，你可以选择你想要它开始的地方和你想要它们结束的地方，例如左边的大栏是：“w-full h-full row-start-1 row -跨度 3”。

我还可以给你一个提示，那就是使用开发工具中的网格工具。 您可以通过单击网格元素旁边的网格按钮打开它。

我开始但无法完成的图像，因为我必须 go:(

我希望这对你有一点帮助，如果你仍然不能解决它，请告诉我。