我正在使用 Tailwind CSS 编写仪表板前端。我创建了页面的网格结构并将我的组件放置在其中。然而，所有列的宽度和长度都是相等的。有些组件通常需要看起来更宽，所以我添加的一些组件与 Figma 文件不匹配。我该如何解决这个问题？
我的页面的代码：
1
870// Components
// Layouts
import DashboardLayout from "@/layouts/dashboard"
// Icons
import { BoltIcon } from '@heroicons/react/24/solid'
import { Bars3CenterLeftIcon } from '@heroicons/react/24/solid'
import { EllipsisVerticalIcon } from '@heroicons/react/24/solid'
import { Squares2X2Icon } from '@heroicons/react/24/solid'
import { CheckIcon } from '@heroicons/react/24/solid'
// Types
type Props = {}
export default function OverviewTemplate({ }: Props) {
return (
Dashboard
Want to see metrics for your latest video? Upload and post a video to get started.
Refer to your Network
Earn up to 15% recurring commission.
What’s new on Omnicourse
- Product Development News
- Newly published Contents
Tips & Tricks
- How to Choose the best recording tool
- 5 Steps to Generate interesting Content
- 3 Ways to Earn Income via Omnicourse
- Developing Productive Habits in 3 Steps
)
}
Figma 文件示例：
我的页面如下所示：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
正如评论中所述，您可以使用
flex而不是grid更好地实现此目的输出：
代码：
<div class="flex h-screen flex-col bg-gray-300"> <div>Dashboard</div> <div class="flex flex-1 gap-4"> <div class="flex w-2/4 items-center justify-center rounded-lg bg-orange-300">Upload content</div> <div class="mb-7 flex w-1/4 flex-col gap-4"> <div class="flex h-1/6 items-center justify-center rounded-lg bg-red-300">Content</div> <div class="flex h-2/6 items-center justify-center rounded-lg bg-yellow-300">Content</div> <div class="flex h-3/6 items-center justify-center rounded-lg bg-blue-300">Content</div> </div> <div class="flex h-5/6 w-1/4 items-center justify-center rounded-lg bg-green-300">Another content</div> </div> </div>