我正在使用 Tailwind CSS 來編寫儀表板前端。我創建了頁面的網格結構並將我的元件放置在其中。然而，所有列的寬度和長度都是相等的。有些元件通常需要看起來更寬，所以我添加的一些元件與 Figma 檔案不符。我該如何解決這個問題？
我的頁面的程式碼：
// 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 (
<DashboardLayout>
<div className="grid grid-cols-3 grid-rows-4 gap-x-2 gap-y-3 bg-gray-200 p-2">
<div className="min-h-[50px] rounded-lg col-span-3">
<div className="text-gray-900 text-2xl font-semibold leading-8 mb-4">Dashboard</div>
</div>
<div className="bg-white min-h-[50px] rounded-lg row-span-3">
<div className="bg-white rounded-lg row-span-3">
<div className="text-center">
<svg className="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
</svg>
<p className="text-gray-900 text-sm font-medium leading-5 mt-1">Want to see metrics for your latest video? Upload and post a video to get started.</p>
<div className="mt-6">
<button type="button" className="inline-flex items-center rounded-md border border-transparent bg-indigo-900 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
Upload Content
</button>
</div>
</div>
</div>
</div>
<div className="bg-white min-h-[50px] rounded-lg">
<div className="sm:rounded-lg">
<div className="px-4 py-5 sm:p-6">
<h3 className="text-indigo-900 text-base font-semibold leading-6">Refer to your Network</h3>
<div className="mt-2 max-w-xl text-indigo-900 text-sm font-medium leading-5 whitespace-nowrap">
<p>Earn up to 15% recurring commission.</p>
</div>
<div className="mt-5">
<button type="button" className="inline-flex items-center rounded-md border border-transparent bg-indigo-900 px-4 py-2 text-xs font-medium leading-4 text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Upload Content</button>
</div>
</div>
</div>
</div>
<div className="bg-white min-h-[50px] rounded-lg row-span-3">
<fieldset className="space-y-2">
<div className="px-4 py-5 sm:px-6 flex flex-row">
<Squares2X2Icon className="h-6 w-6 fill-indigo-500 mr-5" />
<h3 className="text-gray-900 text-base font-semibold leading-6">Gamification area</h3>
</div>
<div className="relative flex items-start border-t border-gray-200">
<div className="ml-3">
<p className="text-black text-sm font-medium leading-5 mb-3 mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div className="relative flex items-start">
<div className="ml-3">
<button type="button" className="text-gray-700 text-sm font-medium leading-5 inline-flex items-center rounded-md bg-emerald-50 border border-emerald-200 p-2">Complete your Profile</button>
</div>
</div>
<div className="relative flex items-start">
<div className="ml-3">
<button type="button" className="text-gray-700 text-sm font-medium leading-5 inline-flex items-center rounded-md border border-gray-200 p-2">Review Content Guideline</button>
</div>
</div>
<div className="relative flex items-start">
<div className="ml-3">
<button type="button" className="text-gray-700 text-sm font-medium leading-5 inline-flex items-center rounded-md border border-gray-200 p-2">Meet-up with Creator Team</button>
</div>
</div>
<div className="relative flex items-start">
<div className="ml-3 text-sm">
<button type="button" className="text-gray-700 text-sm font-medium leading-5 inline-flex items-center rounded-md border border-gray-200 p-2">Upload First Content</button>
</div>
</div>
<div className="relative flex items-start">
<div className="ml-3">
<button type="button" className="text-gray-700 text-sm font-medium leading-5 inline-flex items-center rounded-md border border-gray-200 p-2">Share Your Content on Social Media</button>
</div>
</div>
<div className="relative flex items-start">
<div className="ml-3">
<button type="button" className="text-gray-700 text-sm font-medium leading-5 inline-flex items-center rounded-md border border-gray-200 p-2">Register Affiliate Program</button>
</div>
</div>
</fieldset>
</div>
<div className="bg-white min-h-[50px] rounded-lg">
<div className="overflow-hidden bg-white shadow sm:rounded-lg">
<div className="px-4 py-5 sm:px-6 flex flex-row">
<BoltIcon className="h-6 w-6 fill-indigo-500 mr-5" />
<h3 className="text-gray-900 text-base font-semibold leading-6">What’s new on Omnicourse</h3>
</div>
<div className="px-4 py-5 sm:p-0">
<dl className="">
<div className="pt-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 border-t border-gray-200">
<dt className="text-gray-900 text-sm font-medium leading-5 whitespace-nowrap">Product Development News</dt>
</div>
<div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-gray-900 text-sm font-medium leading-5 whitespace-nowrap">Newly published Contents</dt>
</div>
</dl>
</div>
</div>
</div>
<div className="bg-white min-h-[50px] rounded-lg">
<div className="overflow-hidden shadow sm:rounded-lg">
<div className="px-4 py-5 sm:px-6 flex flex-row">
<Bars3CenterLeftIcon className="h-6 w-6 fill-indigo-500 mr-5" />
<h3 className="text-gray-900 text-base font-semibold leading-6 whitespace-nowrap">Tips & Tricks</h3>
<EllipsisVerticalIcon className="h-6 w-6 fill-gray-400 ml-20" />
</div>
<div className="px-4 py-5 sm:p-0">
<dl className="">
<div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6 border-t border-gray-200">
<dt className="text-gray-900 text-sm font-medium leading-5 whitespace-nowrap">How to Choose the best recording tool</dt>
</div>
<div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
<dt className="text-gray-900 text-sm font-medium leading-5 whitespace-nowrap">5 Steps to Generate interesting Content</dt>
</div>
<div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
<dt className="text-gray-900 text-sm font-medium leading-5 whitespace-nowrap">3 Ways to Earn Income via Omnicourse</dt>
</div>
<div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
<dt className="text-gray-900 text-sm font-medium leading-5 whitespace-nowrap">Developing Productive Habits in 3 Steps</dt>
</div>
</dl>
</div>
</div>
</div>
</div>
</DashboardLayout>
)
}
Figma 檔案範例：
我的頁面如下所示：
如評論所述，您可以使用
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>